在CSS

Question

在下面的代码段中，我将第一个列表项设为红色，并隐藏了所有其他列表项。

然后，我尝试显示所有列表项，并通过定位li元素使它们全部变黑。

当前，没有使用最后一个li选择器进行更改。

所以，我想知道为什么最后一个li选择器对视觉输出没有影响？

谢谢

li:not(:first-child) { /* Hide all li elements other than the first one */
  display: none;
}

li:first-child { /* Set list item 1 to be red */
  color: red;
}

/* Undo all changes above */
li { /* Make all li elements have this property ()*/
  display: block;
  color: black;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Answer 1

增加最后一个选择器的specificity以获得所需的结果。

下面是一个示例，其中所有选择器都具有相同的特异性（类+伪类），最后一个将获胜：

li:not(:first-child) { /* Hide all li elements other than the first one */
  display: none;
}

li:first-child { /* Set list item 1 to be red */
  color: red;
}

/* Undo all changes above */
li:nth-child(n) { /* Make all li elements have this property ()*/
  display: block;
  color: black;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Answer 2

来自https://developer.mozilla.org/en-US/docs/Web/CSS/:not

  

此伪类可以提高规则的特异性。例如，   #foo:not(#bar)将与简单的#foo匹配相同的元素，但具有更高的特异性。

您的第一个规则比最后一个规则更具特异性，因此display: none;保持有效，而display: block;被忽略。