html – 重置css中的伪类更改

概述在下面的代码片段中,我将第一个列表项设为红色,并隐藏了所有其他列表项. 然后,我尝试显示所有列表项,并通过定位li元素使它们全部变黑. 目前,没有使用最后一个li选择器进行更改. 所以,我想知道为什么最后一个li选择器对视觉输出没有影响？ 谢谢 li:not(:first-child) { /* Hide all li elements other than the first one */ 在下面的代码片段中,我将第一个列表项设为红色,并隐藏了所有其他列表项.

然后,我尝试显示所有列表项,并通过定位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>

解决方法 增加最后一个选择器的 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>

总结

以上是内存溢出为你收集整理的html – 重置css中的伪类更改全部内容，希望文章能够帮你解决html – 重置css中的伪类更改所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。