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) - 将选择除最后七个子元素之外的所有元素。当少于七个孩子时，这将不匹配。
:first-child:nth-last-child(n+7) - 将仅选择与其他部分匹配的元素中的第一个子元素（即，当有七个或更多子元素时，仅选择第一个子元素）

＆＃13;

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

＆＃13;

<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>

＆＃13;

Fiddle Demo（由于某些原因，它不能与代码段中的n+7一起使用）

Answer 2

对于第一个元素，您可以使用css中的第一个类型。例如：

 p:first-of-type {
        background: #ff0000;
    }

当7个或更多孩子时，CSS First Child

2 个答案: