html - CSS First Child 当有 7 个或更多 child 时

Question

所以当有 7 个或更多元素时，我有这个查询来获取 last-child

li:nth-last-child(7) ~ li:last-child {
    background: red;
}

这适用于任意数量的元素，只要至少有 7。我想做的恰恰相反，获取 first-child。

我尝试了以下方法

li:nth-last-child(7) ~ li:first-child {
    background: red;
}

但这行不通。奇怪的是，我可以使用以下方法获取第二个子元素

li:nth-last-child(7) ~ li:nth-child(2) {
    background: red;
}

我知道这是非常复杂的 CSS，甚至可能无法实现，但我想知道它是否可以完成。如果可能的话，我宁愿不使用 JS。我想把这当作一个挑战 ;)

Answer 1

当有 7 个或更多元素时，您可以使用以下选择器选择第一个元素:

div:first-child:nth-last-child(n+7) {
  color: red;
}

解释:

• nth-last-child(n+7) - 将选择除最后七个子元素之外的所有子元素。当少于七个 child 时，这将不匹配。
• :first-child:nth-last-child(n+7) - 将仅选择元素，该元素也是匹配其他部分的元素中的第一个子元素(即，选择只有七个或更多 child 时的第一个 child )

.container > div:first-child:nth-last-child(n+7) {
  color: red;
}

<h3>Has seven children</h3>
<div class='container'>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

<h3>Has six children</h3>
<div class='container'>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

<h3>Has nine children</h3>
<div class='container'>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

Fiddle Demo (出于某种原因，它不适用于片段中的 n+7)