当使用Chrome的devtools检查一个元素时,在元素选项卡中,右侧的“样式”栏显示了相应的CSS属性。有时,其中一些属性会被修改。这些性质是什么意思?
当前回答
如果你想在得到打孔槽指示后仍然应用样式,你可以使用"!重要的是要加强风格。这可能不是一个正确的解决方案,但可以解决问题。
其他回答
当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。 我不知道这是为什么,但是你不想搞砸它。
顺便说一句。如果你正在使用@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代码再次,它应该是好的。
如果你想在得到打孔槽指示后仍然应用样式,你可以使用"!重要的是要加强风格。这可能不是一个正确的解决方案,但可以解决问题。
推荐文章
- 为什么我的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宽度的小数点后的位置是尊重?