Css Google Chrome开发工具中的交叉样式属性意味着什么？

使用Chrome的devtools检查元素时，在元素选项卡中，右侧的“样式”栏显示相应的CSS属性。有时，这些财产中的一些会被冲破。这些属性是什么意思？

当CSS属性显示为删除时，这意味着应用了略去的样式，但随后被更具体的选择器、更局部的规则或同一规则中更晚的属性覆盖

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

---

例如，如果对所有

div

s应用了背景色，但对具有特定id的

div

s应用了不同的背景色，则会显示第一种颜色，但会被划掉，因为第二种颜色已将其替换（在具有该id的

div

的属性列表中）.

除了上面的答案，我还想强调一个让我非常惊讶的被删除财产的案例

如果要将背景图像添加到div：

<div class = "myBackground">

</div>

但如果您将订单交换为：-

.myBackground {
 height:100px;
 width:100px;
 background-size: contain;  //before the background
 background: url("/img/bck/myImage.jpg") no-repeat; 
}

然后在chrome中，您将看到背景大小被删除。

---

我不知道这是为什么，但你不想弄糟它。

在旁注上。如果您正在使用@media查询（例如

@media屏幕（最大宽度：500px

）），请特别注意在使用正常样式后应用@media query。因为@media query后面跟的是处理相同元素的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 **

---

在某些情况下，当您复制并粘贴CSS代码到某个地方时，它会破坏格式，因此Chrome会显示黄色警告。您应该再次尝试重新格式化CSS代码，这样就可以了

如果您希望即使在收到指示后也应用样式，您可以使用

“！important”

强制使用样式。这可能不是一个正确的解决方案，但可以解决问题。

有两种方法可以知道哪些规则是最重要的：

在“样式”选项卡顶部的“过滤器”框中搜索特性。它将显示包含该属性的所有规则，属性以黄色突出显示

在“计算”选项卡中查找相同的属性类型，然后展开该属性以查看尝试应用该属性的各种规则的来源

---

另一方面，被划掉的属性可以是那些稍后在同一CSS规则中被相同命名属性“取消”的属性（根据CSS规范的要求）。@JacobM：如何知道哪个属性覆盖了被划掉的属性。@ArunRaj——没有一个简单的方法来判断哪个属性（或多个属性）覆盖了被划掉的属性。一个选项是在“计算”样式选项卡中查找相同的属性类型，然后如果展开该选项卡，则应看到尝试应用该属性的各种规则（包括实际处于活动状态的规则）的源。因此，如果您看到“font-size:11px”被划掉，请查看“font-size”的计算属性，您应该会看到应用该字体大小的所有位置，包括实际活动的位置。希望这有帮助。现在在样式选项卡的顶部有一个过滤器框。如果您想知道是什么覆盖了

边框颜色

，只需在过滤器中键入

边框颜色

。它将显示包含该属性的所有规则，属性以黄色突出显示。也可以在Firefox中使用。还想添加：如果一个样式被删除，但它已经位于顶部，那么您可能在某个地方有一个CSS样式

！重要信息

这会覆盖它。该问题没有询问任何有关“黄色警告”的问题。这个答案充其量只能是一个注释。如果媒体查询位于不同的css文件中怎么办？@CarlosHernándezGil，那么它将取决于加载样式表的顺序。但是，@media querys中的某些样式为什么不会被以后的正常样式覆盖呢？这让我觉得顺序无关紧要，我自己的样式属性也有问题。直到我读到你的答案。但是，这到底是怎么回事？！我很难通过媒体为手机绘制谷歌地图。我有一个浏览器的基本设置（没有媒体），然后是各种尺寸较小的媒体，但没有起作用（GC中显示的移动设备的正确阶梯，但带有删除线）。在我添加之后！重要的是，它可以工作，但我不理解它背后的“逻辑”…因为

背景

是一个包含

背景大小

的右手，如果没有定义，它是

自动

，如果图像既没有固有宽度也没有固有高度，它是

包含

。更令人惊讶的是，应用的值可以被穿透，例如

html{font size:1rem}p{font size:2rem}

或

div{color:red}div>p{color:currentColor}

。

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