CSS Google Chrome devtools 中的交叉样式属性是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3047056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What do the crossed style properties in Google Chrome devtools mean?
提问by rohitmishra
While inspecting an element using Chrome's devtools, in the elements tab, the right-hand side 'Styles' bar shows the corresponding CSS properties. At times, some of these properties are struck-through. What do these properties mean?
使用 Chrome 的 devtools 检查元素时，在元素选项卡中，右侧的“样式”栏显示相应的 CSS 属性。有时，其中一些属性会被删除。这些属性是什么意思？
回答by Jacob Mattison
When a CSS property shows as struck-through, it means that the crossed-out style was applied, but then overridden by a more specific selector, a more local rule, or by a later property within the same rule.
当 CSS 属性显示为删除线时，这意味着应用了划掉的样式，但随后被更具体的选择器、更局部的规则或同一规则中的后续属性覆盖。
(Special cases: a style will also be shown as struck-through if a style exists in an matching rule but is commented out, or if you've manually disabled it by unchecking it within the Chrome developer tools. It will also show as crossed out, but with an error icon, if the style has a syntax error.)
（特殊情况：如果样式存在于匹配规则中但被注释掉，或者如果您通过在 Chrome 开发人员工具中取消选中它来手动禁用它，样式也将显示为划线。它也将显示为划线out，但带有错误图标，如果样式有语法错误。）
For example, if a background color was applied to all divs, but a different background color was applied to divs with a certain id, the first color will show up but will be crossed out, as the second color has replaced it (in the property list for the divwith that id).
例如，如果背景颜色应用于所有divs，但不同的背景颜色应用于div具有特定 id 的 s，则第一种颜色将显示但会被划掉，因为第二种颜色已替换它（在属性中div具有该 ID 的列表）。
回答by sanjihan
On a side note. If you are using @mediaqueries (such as @media screen (max-width:500px)) pay particular attention to applying @media query AFTERyou are done with normal styles. Because @media query will be crossed out (even though it is more specific) if followed by css that manipulates the same elements. Example:
在旁注。如果您正在使用@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 **
回答by Rishul Matta
In addition to the above answer I also want to highlight a case of striked out property which really surprised me.
除了上述答案，我还想强调一个让我感到惊讶的被剔除财产的案例。
If you are adding a background image to a div :
如果要将背景图像添加到 div ：
<div class = "myBackground">
</div>
You want to scale the image to fit in the dimensions of the div so this would be your normal class definition.
您想缩放图像以适应 div 的尺寸，因此这将是您的正常类定义。
.myBackground {
height:100px;
width:100px;
background: url("/img/bck/myImage.jpg") no-repeat;
background-size: contain;
}
but if you interchange the order as :-
但是如果您将订单交换为：-
.myBackground {
height:100px;
width:100px;
background-size: contain; //before the background
background: url("/img/bck/myImage.jpg") no-repeat;
}
then in chrome you ll see background-sizeas striked out. I am not sure why this is , but yeah you dont want to mess with it.
然后在 chrome 中，您会看到背景大小被删除。我不确定为什么会这样，但是是的，您不想弄乱它。
回答by Nanda
If you want to apply the style even after getting struck-trough indication, you can use "!important"to enforce the style. It may not be a right solution but solve the problem.
如果您想在获得触底指示后应用该样式，您可以使用"!important"来强制执行该样式。这可能不是正确的解决方案，但可以解决问题。
回答by hien711
There is some cases when you copy and paste the CSS code in somewhere and it breaks the format so Chrome show the yellow warning. You should try to reformat the CSS code again and it should be fine.
在某些情况下，当您将 CSS 代码复制并粘贴到某处时，它会破坏格式，因此 Chrome 会显示黄色警告。您应该再次尝试重新格式化 CSS 代码，应该没问题。
