html - CSS child 后裔

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

你正在捕获那个 li 元素并且你正在寻找他的子元素但是这里的 li 元素没有任何子元素所以它不会工作。如果 ul 有类“class1”，它可能会像你想要的那样工作。