在使用 Chrome 的开发工具检查元素时,在元素选项卡中,右侧的“样式”栏会显示相应的 CSS 属性。有时,其中一些属性会被删除。这些属性是什么意思?
7 回答
当 CSS 属性显示为删除线时,表示应用了划掉的样式,但随后被更具体的选择器、更本地的规则或同一规则中的后续属性覆盖。
(特殊情况:如果样式存在于匹配规则中但已被注释掉,或者如果您通过在 Chrome 开发人员工具中取消选中它手动禁用它,则样式也将显示为划线。它也将显示为划线出,但带有错误图标,如果样式有语法错误。)
例如,如果对所有div
s 应用了背景颜色,但对具有特定 id 的 s 应用了不同的背景颜色div
,则第一种颜色将显示但将被划掉,因为第二种颜色已替换它(在属性中div
具有该 ID的列表)。
在旁注中。如果您正在使用@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 **
除了上述答案之外,我还想强调一个让我感到惊讶的被剔除财产的案例。
如果要将背景图像添加到 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 中你会看到背景大小被删除。我不知道为什么会这样,但是是的,你不想惹它。
如果即使在获得击穿指示后仍想应用样式,则可以使用"!important"
来强制执行样式。这可能不是一个正确的解决方案,但可以解决问题。
有两种方法可以知道哪些规则被覆盖:
在样式选项卡顶部的过滤器框中搜索属性。它将显示包含该属性的所有规则,该属性以黄色突出显示。
在 Computed 选项卡中查找相同的属性类型,然后将其展开以查看尝试应用该属性的各种规则的来源。
如果您忘记设置Unit
值,也会发生这种情况。
例如:
margin-left: -53
代替
margin-left: -53px;
在某些情况下,当您将 CSS 代码复制并粘贴到某处时,它会破坏格式,因此 Chrome 会显示黄色警告。您应该再次尝试重新格式化 CSS 代码,应该没问题。