顺便说一句。如果你正在使用@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开发工具中手动取消选中而禁用了它，则该样式也会显示为删除。如果样式有语法错误，它也会显示为被划掉，但有一个错误图标。)

例如，如果一个背景色被应用到所有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; 
}

然后在铬，你会看到背景大小为strike out。 我不知道这是为什么，但是你不想搞砸它。

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

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

顺便说一句。如果你正在使用@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 **

如果你想在得到打孔槽指示后仍然应用样式，你可以使用"!重要的是要加强风格。这可能不是一个正确的解决方案，但可以解决问题。