当使用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选项卡中查找相同的属性类型,然后展开它以查看试图应用该属性的各种规则的源。
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 在JS的Chrome CPU配置文件中,'self'和'total'之间的差异
- 谷歌chrome扩展::console.log()从后台页面?
- 下一个元素的CSS选择器语法是什么?
- 未捕获的SyntaxError:
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- Access-Control-Allow-Origin不允许Origin < Origin >
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 如何设置断点在内联Javascript在谷歌Chrome?
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?