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

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

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

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

例如，如果将背景颜色应用于所有divs，但对div具有特定id的s 应用了不同的背景颜色，则第一种颜色将显示但会被划掉，因为第二种颜色已将其替换（在属性中div具有该ID的列表）。

附带说明。如果您使用@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 **

除了上述答案外，我还想强调一下一个令人震惊的财产被剔除的案例。

如果要将背景图像添加到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浏览器中，您会看到删除的背景尺寸。我不确定为什么会这样，但是是的，您不想弄乱它。

如果即使在获得敲击指示后仍要应用样式，则可以使用"!important"来强制样式。它可能不是正确的解决方案，但可以解决问题。

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