CSS3意外的行为CSS不会被覆盖

问题描述：

我在试图学习CSS3时遇到这段代码。下面的代码结果是：我用红色写的很棒。但是当尝试没有样式标签前三行的代码时，或者在样式标签的第五行添加！重要时，结果是：我用蓝色写的很棒。任何人都可以向我解释这种行为。CSS3意外的行为CSS不会被覆盖

<!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>

Err，如果您尝试使用“没有前三行”，我认为这是第一条颜色为红色的规则，那么除了颜色外，还有其他什么规则可供浏览器应用：蓝色？ – BoltClock

不过为什么第二条规则不会覆盖第一条规则呢？ – user605505

答

此选择：

#awesome .favorite:not(#awesome) .highlight

具有较高的特异性不止这一个：

#awesome .highlight:nth-of-type(1):nth-last-of-type(1)

关闭我的头顶，我不知道nth-of-type或not声明如何影响特异性，但粗略地说，第一个有两个类，第二个只有一个，所以它有点意义，它会更具体。

在CSS中，更具体的选择器覆盖不太具体的选择器，无论顺序如何，所以您的文本是红色的。

当然，如果你拿出红色课，那么蓝色的是最具体的，所以它会“赢”。通过添加!important，您可以提高蓝色特征的特异性，因此它比红色特征更具体，并且会“赢”。

每个伪类除外：not（）与类选择器具有相同的特定值。：not（）具有它的参数的特殊性，而它本身不包含伪类。 – BoltClock

你认为它是什么意思？ – user605505

@ user605505：特异性：not（#awesome）与#awesome相同 - 一个id选择器。 – BoltClock

CSS3意外的行为CSS不会被覆盖

相关推荐