Question

我是否必须为所有子项设置样式，而子项数是四个以上父元素呢？

我知道我设置了nth-child(4) ~ child方法的样式，但是该方法仅用于下一个子项的下一个兄弟姐妹，但是在这种情况下，我必须为所有子项设置父元素的样式？

Answer 1

您的问题尚不清楚，但是我想您想更改除前四个孩子以外的所有孩子。因此，从子nr5开始。为此，请使用nth-child(n+5)，其中n是一个计数器（从0开始），而5是一个偏移值。

如果您只想选择前4个，请使用nth-child(-n + 4)

请参见下面针对5,6,7等孩子的解决方案

p:nth-child(n + 5) {
  color:red
}

<div>
  <p>
    aaaaaa
  </p>
  <p>
    aaaaaa
  </p>
  <p>
    aaaaaa
  </p>
  <p>
    aaaaaa
  </p>
  <p>
    aaaaaa
  </p>
  <p>
    aaaaaa
  </p>
  <p>
    aaaaaa
  </p>

</div>

Answer 2

您没有使用JavaScript来完成此任务。 Heydon Pickering写了一篇很棒的article，内容涉及使用各种伪选择器来基于计数来设置内容样式。我强烈建议您阅读本文。

nth-last-child(n+4)本身可以使您从结尾开始获取4+以上的每个元素。对于5个元素，只有第一个被选择，6个元素1和2被选择，等等。

nth-last-child(n+4) ~ li是使整个事物融合在一起的原因。 ~是同级选择器。在这种情况下，将使用~之前的所有内容以及与先前匹配项和li匹配项的直接同级项。

更新

根据您对原始问题的评论，我添加了一个额外的CSS选择器，使3个或更少。如果只需要3，请将-n+3更改为3。

除非您面临挑战，或者真的想考虑nth个孩子，否则通常不会选择使Javascript成为您唯一的解决方案。

li:nth-last-child(-n+3):first-child,
li:nth-last-child(-n+3):first-child ~ li {
  /* 3 or Less */
  color: blue;
}

li:nth-last-child(n+4),
li:nth-last-child(n+4) ~ li {
  /* 4 or More */
  color: red;
}

<ul>
  <li>1</li>
  <li>2</li>
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

我可以在CSS中检测到孩子的数量吗，尽管“儿童数量”将超过四个？

2 个答案:

更新