Google Chrome devtools中的交叉样式属性是什么意思?

CSS

樱GO

2020-03-24

使用Chrome的devtools检查元素时,在“元素”标签中,右侧的“样式”栏显示了相应的CSS属性。有时,其中某些属性会被删除。这些属性是什么意思?

第3320篇《Google Chrome devtools中的交叉样式属性是什么意思?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
番长猴子 2020.03.24

在某些情况下,您将CSS代码复制并粘贴到某处会破坏格式,因此Chrome会显示黄色警告。您应该再次尝试重新格式化CSS代码,这应该没问题。

凯西里 2020.03.24

附带说明。如果您使用@media查询(例如@media screen (max-width:500px),请特别注意在使用常规样式之后应用@media查询因为@media查询将被省略(即使它更具体),如果后面紧跟的是操纵相同元素的css。例:

@media (max-width:750px){
#buy-box {width: 300px;}
}

#buy-box{
width:500px;
}

** width will be 500px and 300px will be crossed out in Developer Tools. **

#buy-box{
width:500px;
}

@media (max-width:750px){
#buy-box {width: 300px;}
}

** width will be 300px and 500px will be crossed out **
凯西里 2020.03.24

如果即使在收到笔划指示后仍要应用样式,则可以使用"!important"来强制样式。它可能不是正确的解决方案,但可以解决问题。

神无小小 2020.03.24

除了上述答案外,我还想强调一下一个被剔除财产的案例,这确实令我感到惊讶。

如果要将背景图像添加到div中:

<div class = "myBackground">

</div>

您要缩放图像以适合div的尺寸,因此这将是您的常规类定义。

.myBackground {

 height:100px;
 width:100px;
 background: url("/img/bck/myImage.jpg") no-repeat; 
 background-size: contain;

}

但是,如果您将订单交换为:-

.myBackground {
 height:100px;
 width:100px;
 background-size: contain;  //before the background
 background: url("/img/bck/myImage.jpg") no-repeat; 
}

然后在chrome中,您会看到背景尺寸已删除。我不确定为什么会这样,但是是的,您不想弄乱它。

达蒙Tom 2020.03.24

当CSS属性显示为删除线时,表示应用了划线样式,但随后被更特定的选择器,更本地的规则或同一规则中的更高属性覆盖。

(特殊情况:如果某个样式存在于匹配规则中但已被注释掉,或者您通过在Chrome开发者工具中取消选中该样式来手动将其禁用,则该样式也会显示为删除线。输出,但如果样式有语法错误,则带有错误图标。)

For example, if a background color was applied to all divs, but a different background color was applied to divs with a certain id, the first color will show up but will be crossed out, as the second color has replaced it (in the property list for the div with that id).

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android