Google Chrome 开发工具中的交叉样式属性是什么意思？

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

（特殊情况：如果样式存在于匹配规则中但已被注释掉，或者如果您通过在 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; 
}

然后在 chrome 中你会看到背景大小被删除。我不知道为什么会这样，但是是的，你不想惹它。

---

在旁注中。如果您使用 @media 查询（例如 @media screen (max-width:500px））请特别注意应用@media 查询AFTER，您已完成正常样式。因为@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" 来强制执行该样式。这可能不是一个正确的解决方案，但可以解决问题。

---

有两种方法可以知道哪些规则被覆盖：

在样式选项卡顶部的过滤器框中搜索属性。它将显示包含该属性的所有规则，该属性以黄色突出显示。在 Computed 选项卡中查找相同的属性类型，然后将其展开以查看尝试应用该属性的各种规则的来源。

---

如果您忘记设置值的 Unit，也会发生这种情况。
例如：
margin-left: -53
而不是
margin-left: -53px;

---

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

---