Question

我想在我的HTML中将边框放到特定的li上。我想要从nth-child（9）开始应用边框，然后在每第4个li之后应用。

例如，为了清楚这一点，我希望9,13,17,21,25 ......有白色边框而其他没有。

我在css中试过这个：

container ul li {
   width:50%;
   position:relative;
}

container ul li:nth-child(n+9):nth-child(4n) {
   border:1px solid #fff;
}

但对我不起作用。有没有办法实现呢？

Answer 1

你需要

ul li:nth-child(4n+9) {
/* your styles here */
}

ul li:nth-child(4n+9) {
  color: red
}

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
  <li>Item9</li>
  <li>Item10</li>
  <li>Item11</li>
  <li>Item12</li>
  <li>Item13</li>
  <li>Item14</li>
  <li>Item15</li>
  <li>Item16</li>
  <li>Item17</li>
  <li>Item18</li>
  <li>Item19</li>
  <li>Item20</li>
  <li>Item21</li>
  <li>Item22</li>
  <li>Item23</li>
  <li>Item24</li>
  <li>Item25</li>
</ul>

每4个李，但从具体数字开始

1 个答案: