什么交叉风格的属性在谷歌Chrome devtools意味着?

当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中你会看到background-size被取消。 我不知道为什么会这样，但是是的，你不想搞砸它

顺便说一句。如果你正在使用@media查询(例如@media screen (max-width:500px))，特别注意应用@media查询后，你已经完成了正常样式。因为如果后面跟着操作相同元素的css， @media查询将被划掉(即使它更具体)。例子:

@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代码再次，它应该是好的。

如果你想在得到strike -槽指示后应用该样式，你可以使用"!important"来强制该样式。这可能不是一个正确的解决方案，但可以解决问题。

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

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

   < img src = " https://i.imgur.com/P4EQd5g.png " alt = " / >

2. 在Computed选项卡中查找相同的属性类型，然后展开该选项卡以查看试图应用该属性的各种规则的源。

   < img src = " https://i.imgur.com/tn1eTUq.png " alt = " / >