我在尝试学习CSS3时遇到了这段代码。结果下面的代码是：我用红色写的很棒。但是，当尝试不使用样式标签的前三行的代码或在样式标签的第五行中添加！important时，结果是：我用蓝色写得很棒。谁能向我解释这种行为。
<!DOCTYPE html>
<html>
<head>
<style>
#awesome .favorite:not(#awesome) .highlight {
color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
color: blue ;
}
</style>
</head>
<body>
<ul class="shopping-list" id="awesome">
<li>
<span>Milk</span>
</li>
<li class="favorite" id="must-buy">
<span class="highlight">I am awesome</span>
</li>
</ul>
</body>
</html>
该选择器：
#awesome .favorite:not(#awesome) .highlight
具有比这更高的特异性：
#awesome .highlight:nth-of-type(1):nth-last-of-type(1)
关闭我的头顶，我不知道如何nth-of-type或not声明的影响特异性，但粗略，首先有两类，第二个只有一个，所以它是有点感觉，这将是更具体。
在CSS中，无论顺序如何，更具体的选择器都会覆盖较不具体的选择器，因此您的文本为红色。
当然，如果您剔除红色类别，则蓝色类别是最具体的类别，因此它将“获胜”。通过添加!important，您正在增加蓝色的特异性，因此它比红色的特异性更强，它将“获胜”。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句