重复css选择器在通过Google Chrome控制台日志显示时意味着什么？ [英] What do repeating css selectors mean when displayed via Google Chrome console log?
问题描述
请问有人可以解释当我在Google Chrome控制台日志中看到重复显示css选择器时出现的问题吗？为什么第二个实例有通过它的线。
我猜这是一个编码错误，我需要修复。
FYI - 根据下面的屏幕截图，两个.items都来自同一个css文件。
它看起来是因为CSS在文件中找到两次。
划掉行意味着这些样式已被找到但被覆盖。
简而言之， display：block 像控制台意味着应用了CSS，但后来发现了一些与CSS相关的CSS并覆盖了当前的CSS。
<例如，如果您有如下标记：
< html>
< head>
< style>
h2＃title {color：red}
h2＃title {color：yellow}
< / style>
< / head>
< body>
< h2 id =title>嗨< / h2>
< / body>
< / html>
然后，找到 h2＃title 在文件中两次，只有一次可以应用，所以，你会看到类似这样的内容，无论哪个被覆盖，都会被截取： code> h2＃title {
color：red
}
阅读这篇文章： https://developer.chrome.com/devtools/docs/elements-styles?csw=1&safe=on#computed_style
Please can someone explain what the issue is when I see a css selector repeated when shown in the Google chrome console log? Why does the second instance have lines through it.
I'm guessing this is a coding error that I will need to fix.
FYI - As per the screen shot below, both .items come from the same css file.
It appears because the CSS is found twice in the file.
crossed out lines means, that those styles were found but have been overwritten.
To put simply, display:block like console means that the CSS was applied but then some more relevant CSS is found and overwrote the current one.
So for example, if you have markup like :
<html>
<head>
<style>
h2#title{color : red}
h2#title{color : yellow}
</style>
</head>
<body>
<h2 id="title"> Hi </h2>
</body>
</html>
then, since h2#title is found twice in the file, only one can be applied, so, you will see something like this, whichever got overwrote would be crossed :
h2#title{
color : red
}
A Good Read on this : https://developer.chrome.com/devtools/docs/elements-styles?csw=1&safe=on#computed_style
Related Helpful Thread : Chrome Developer Tools: How to find out what is overriding a CSS rule?
这篇关于重复css选择器在通过Google Chrome控制台日志显示时意味着什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
