通过谷歌Chrome控制台日志显示重复的css选择器意味着什么?

Dan*_*007 4 html css google-chrome

当有人在Google Chrome控制台日志中显示重复的css选择器时,有人可以解释一下这个问题吗?为什么第二个实例有通过它的行.

我猜这是一个我需要解决的编码错误.

仅供参考 - 根据下面的屏幕截图,两个.items都来自同一个css文件.

在此输入图像描述

Noo*_*tor 7

看来是因为在文件中找到了两次CSS.

crossed out line表示已找到这些样式但已被覆盖.

简而言之,   display:block 就像控制台一样,意味着应用了CSS,但随后发现了一些更相关的 CSS并覆盖了当前的CSS.

例如,如果你有像这样的标记:

<html>
    <head>
        <style>
            h2#title{color : red}
            h2#title{color : yellow}
        </style>
    </head>
    <body>
        <h2 id="title"> Hi </h2>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

然后,因为h2#title在文件中找到两次,只能应用一个,所以,你会看到这样的东西,无论哪个被覆盖都会被克服:

h2#title{
     color : red  
}

很好的阅读: https ://developer.chrome.com/devtools/docs/elements-styles?csw = 1 &safe = on #computed_style

相关帮助主题: Chrome开发者工具:如何找出覆盖CSS规则的内容?