Question

我在尝试学习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>

Answer 1

这个选择器：

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

具有比这更高的特异性：

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

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

在css中，无论顺序如何，更具体的选择器都会覆盖不太具体的选择器，因此您的文本为红色。

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

CSS3意外行为CSS未被覆盖

1 个答案: