重置CSS中的伪类更改 [英] Reset pseudo class changes in css

问题描述

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

In the snippet below I have made the first list item red, and hidden all the other list items.

然后，我尝试显示所有列表项，并通过将 li 元素定位为黑色.

I am then trying to display all the list items and make them all black by targeting the li elements.

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

Currently, no changes using the last li selector are being made.

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

So, I'm wondering why the last li selector is having no effect on the visual output?

谢谢

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>

推荐答案

增加

Increase the specificity of the last selector in order to obtain the needed result.

在此示例中，所有选择器都具有相同的特异性(类+伪类)，最后一个将获胜:

Here is an example where all the selectors have the same specificity (class + pseudo-class) and the last one will win:

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>

这篇关于重置CSS中的伪类更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！