Question

我刚刚在Stack上看到了这个问题。

问题是如何在每个.class1元素之后选择前两个li。

<ul>
  <li>Something</li>
  <li class="class1">Important</li>
  <li>I want this</li>
  <li>I want this</li>
  <li class="class1">Important</li>
  <li>I want this</li>
  <li>I want this</li>
  <li>Something</li>
  <li>Something</li>
</ul>

这是（伟大的）正确且被接受的答案：

.class1 + li will select the first subsequent sibling.
.class1 + * + li will select the second.

为了保持特异性低，你也可以使用：

.class1 + *,
.class1 + * + * {...}

现在，我正在玩这个，并想知道为什么这不起作用：

li.class1 li:nth-child(-n+2) {color:red;}

但是这样工作：

li:nth-child(-n+2) {color:red;}

Answer 1

因为当你使用

li.class1 li:nth-child(-n+2) {color:red;}

你正在抓住那个李元素，你正在寻找他的孩子，但这里的李元素没有任何孩子，所以它不会工作。如果ul有类＆＃39; class1＆＃39;也许它会像你想要的那样工作。

Answer 2

li.class1 li:nth-child(-n+2) {color:red;}

这为li内容为li的{{1}}提供了样式{/ 1}}

如果HTML类似

，这将有效

class1

CSS Child Descendants

2 个答案: