时间戳

首页 > 解决方案 > 随后在 CSS 中选择子元素

html - 随后在 CSS 中选择子元素

问题描述

我想随后选择子元素。

例子：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
</ul>

我想随后选择子元素，

2 3 6 7 10 11 14 15 18 19 22 23

我正在尝试选择第一个偶数和下一个数字，然后在 2 个数字之后再次选择下一个偶数和下一个数字。|

我怎么能在 CSS 中做到这一点？

标签： htmlcss

解决方案

您可以将 CSS:nth-child伪类选择器与Functional notation(An+B)一起使用。

ul>li:nth-child(4n+2),/* where n would be 0,1,2.... so final value would be 2,6,10,... */
ul>li:nth-child(4n+3) {  /* here final value would be 3,7,11,... */
  color: red
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
</ul>

推荐阅读