当使用Chrome的devtools检查一个元素时,在元素选项卡中,右侧的“样式”栏显示了相应的CSS属性。有时,其中一些属性会被修改。这些性质是什么意思?


当前回答

有一些情况下,当你复制和粘贴CSS代码在某处,它打破了格式,所以Chrome显示黄色警告。您应该尝试重新格式化CSS代码再次,它应该是好的。

其他回答

有一些情况下,当你复制和粘贴CSS代码在某处,它打破了格式,所以Chrome显示黄色警告。您应该尝试重新格式化CSS代码再次,它应该是好的。

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

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

除了上面的答案,我还想强调一个让我非常惊讶的三振出局的案例。

如果你正在添加一个背景图片到一个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选项卡中查找相同的属性类型,然后展开它以查看试图应用该属性的各种规则的源。