Question

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

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

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

enter image description here

Answer 1

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

crossed out行表示已找到这些样式但已被覆盖。

简而言之， ~~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>

然后，由于h2#title在文件中被发现两次，因此只能应用一个，因此，您将看到类似这样的内容，无论哪个被覆盖都将交叉：

h2#title{
~~color : red~~
}

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

相关有用的帖子 Chrome Developer Tools: How to find out what is overriding a CSS rule?

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

1 个答案: