Question

我想随后选择子元素。

示例：

<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中做到这一点？

Answer 1

您可以将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>

Answer 2

您可以通过css选择器解决问题

ul li:nth-child(4n+2) {
  background: red;
}
ul li:nth-child(4n+3) {
  background: red;
}

随后在CSS中选择子元素

2 个答案: