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

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

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

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

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

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

当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).