什么是谷歌浏览器交叉样式属性devtools是什么意思？

Question

当使用Chrome的devtools，在元素标签中，右手侧“样式”栏中示出了相应的CSS属性检查的元件。有时，一些属性被删除线。做这些特性是什么意思？

Answer 1

当CSS属性显示为删除线，则表示该叉的风格被应用，但随后通过一个更具体的选择器，更多的本地规则，或者由相同的规则内稍后属性覆盖。

（特殊情况：一种风格也将被显示为删除线，如果在匹配规则存在的风格，但已被注释掉，或者如果你手动Chrome开发人员工具中取消选中它禁用它，它也将显示为划掉，但有错误的图标，如果样式有语法错误。）

例如，如果背景颜色被应用到所有divs，但不同的背景颜色施加到divs具有一定ID，第一颜色会出现，但将被划掉，作为第二颜色已经取代它（在用于与该ID的div属性列表）。

Answer 2

在一个方面说明。如果您使用的 @media 查询（如@media screen (max-width:500px））特别注意运用@media查询的在你用正常的方式来完成。因为如果随后的CSS操纵相同的元素@media查询将被划掉（即使它是更具体的）。例如：

@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 **

Answer 3

除了上面的回答我也想突显出删除线的属性，它真的让我吃惊的情况。

如果要添加的背景图像一个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; 
}

然后在铬你将看到的背景尺寸为删除线出来。 我不知道这是为什么，但是，是你不想惹它。

Answer 4

如果你想甚至还让敲击谷底指示后，应用的样式，你可以使用"!important"强制执行的风格。这可能不是一个合适的解决方案，但不能解决问题。

Answer 5

有一些情况下，当您复制并粘贴在某处的CSS代码和它打破了格式，因此Chrome显示黄色预警。你应该尝试再次格式化CSS代码，它应该罚款。