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

【问题标题】：What do the crossed style properties in Google Chrome devtools mean?Google Chrome devtools 中的交叉样式属性是什么意思？
【发布时间】：2011-03-04 02:06:33
【问题描述】：

使用 Chrome 的开发工具检查元素时，在元素选项卡中，右侧的“样式”栏会显示相应的 CSS 属性。有时，其中一些属性会被删除。这些属性是什么意思？

【问题讨论】：

标签： css google-chrome google-chrome-devtools

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果您想在获得击穿指示后应用该样式，您可以使用"!important" 来强制执行该样式。这可能不是一个正确的解决方案，但可以解决问题。

【讨论】：

我在通过媒体为手机缩放 GoogleMap 时遇到了问题。我有一个浏览器的基本设置（没有媒体），然后是各种尺寸较小的媒体，什么不起作用（在 GC 中显示了正确的移动阶梯，但带有删除线）。添加 !important 后，它可以工作，但我不明白它背后的“逻辑”......

【解决方案4】：

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

【讨论】：

这个问题没有问任何关于“黄色警告”的问题。这个答案最好是评论。

【解决方案5】：

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

【讨论】：

如果媒体查询位于不同的 css 文件中怎么办？
@CarlosHernándezGil 那么它将取决于样式表的加载顺序。
但是为什么@media 查询中的某些样式不会被后来的正常样式覆盖？这让我觉得顺序无关紧要，而且我自己的样式属性有问题。直到我读到你的答案。但是，这到底是什么？！

【解决方案6】：

除了上述答案之外，我还想强调一个令我惊讶的财产被剔除的案例。

如果您要向 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 中你会看到 background-size 被删除。我不知道为什么会这样，但是你不想惹它。

【讨论】：

因为background 是包含background-size 的简写形式，如果未定义则为auto，如果图像既没有固有宽度也没有固有高度，则为contain。更令人惊讶的是，应用的值可以被删除，例如。 html { font-size: 1rem } p { font-size: 2rem } 或 div { color: red } div > p { color: currentColor }.

【解决方案7】：

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

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

例如，如果一个背景颜色被应用到所有divs，但是不同的背景颜色被应用到具有特定id的divs，第一个颜色会显示出来但是会被划掉，因为第二种颜色已替换它（在具有该 ID 的 div 的属性列表中）。

【讨论】：

附带说明，被划掉的属性可以是稍后在同一 CSS 规则中被同名属性“取消”的属性（根据 CSS 规范的要求）
@JacobM : 如何知道哪个属性覆盖了被触发的属性。
@ArunRaj -- 没有一种简单的方法可以判断哪个（或多个）属性覆盖了被划掉的属性。一种选择是在“计算”样式选项卡中查找相同的属性类型，然后如果您展开它，您应该会看到尝试应用该属性的各种规则的来源（包括实际处于活动状态的规则） .因此，如果您看到“font-size:11px”被划掉，请查看“font-size”的计算属性，您应该会看到应用了 font-size 的所有位置，包括实际活动的位置。希望这会有所帮助。
样式选项卡顶部现在有一个过滤器框。如果您想知道什么覆盖了border-color，那么只需在过滤器中输入border-color。它将显示包含该属性的所有规则，该属性以黄色突出显示。 This feature 也可以在 Firefox 中使用。
还想补充一点：如果一个样式被删除但它已经在顶部，那么您可能在某个地方有一个 CSS 样式，而 !important 正在覆盖它。