Question

CSS中是否有任何方法可以定位数字集中的元素？就像我有：

<ul>
    <li>Child 1</li>
    <li>Child 2</li>
    <li>Child 3</li>
    <li>Child 4</li>
    <li>Child 5</li>
    <li>Child 6</li>
    <li>Child 7</li>
    <li>Child 8</li>
    <li>Child 9</li>
    <li>Child 10</li>
  </ul>

所以，我想先用li设置前3 color:red，然后用li设置3 color:blue，然后重复。

我不确定它是否可以:nth。

尝试这样的事情，但没有帮助

li:nth-of-type(n+3) {
  color:red;
}

Answer 1

您可以为行中的每个6个元素设置li和样式的最后一个（或第一个）三个默认颜色，不同的是：

li {color: red}

li:nth-child(6n+4), 
li:nth-child(6n+5), 
li:nth-child(6n+6) {
  color: blue;  
}

<ul>
  <li>Child 1</li>
  <li>Child 2</li>
  <li>Child 3</li>
  <li>Child 4</li>
  <li>Child 5</li>
  <li>Child 6</li>
  <li>Child 7</li>
  <li>Child 8</li>
  <li>Child 9</li>
  <li>Child 10</li>
</ul>

Answer 2

您可以使用:nth-child，但您需要设置两套规则，以便一次选择三个元素的组。

li:nth-child(3n),li:nth-child(3n-1),li:nth-child(3n-2) {
  color: red;
}
li:nth-child(6n),li:nth-child(6n-1),li:nth-child(6n-2) {
  color: blue;
}

<ul>
  <li>Child 1</li>
  <li>Child 2</li>
  <li>Child 3</li>
  <li>Child 4</li>
  <li>Child 5</li>
  <li>Child 6</li>
  <li>Child 7</li>
  <li>Child 8</li>
  <li>Child 9</li>
  <li>Child 10</li>
</ul>

CSS用于定位数字集合中的元素

2 个答案: