Google Chrome devtools中的交叉样式属性是什么意思？
使用Chrome的devtools检查元素时，在元素标签中，右侧的“样式”栏显示相应的CSS属性。 有时，这些属性中的一些是通过的。 这些属性是什么意思？
当CSS属性显示为直通式时，这意味着划叉样式已应用，但是会被更具体的select器，更多本地规则或同一规则中的更高版本属性覆盖。
（特殊情况：如果某个样式存在于匹配的规则中，但该样式已被注释掉，或者您已通过在Chrome开发人员工具中取消选中手动将其手动禁用，则该样式也会显示为“穿透”如果样式有语法错误，则会显示一个错误图标。）
例如，如果背景颜色应用于所有div ，但不同的背景颜色应用于具有特定id的div ，则第一种颜色将显示出来，但会被划掉，因为第二种颜色代替了它（在具有该ID的div的属性列表）。
除了上述的答案之外，我还想强调的是一个惊人的财产真正让我感到惊讶的情况。
如果你添加一个背景图片到一个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; }
然后在铬中，你会看到背景大小一样。 我不知道这是为什么，但是你不想惹它。
在旁边注意。 如果您正在使用@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"来强制执行样式。 这可能不是一个正确的解决scheme，但解决了这个问题。
在某些情况下，如果您将CSS代码复制并粘贴到某个地方，则会破坏格式，Chrome会显示黄色警告。 你应该尝试重新格式化的CSS代码，它应该没事。
