css Google Chrome devtools中的交叉样式属性是什么意思?

zaq34kh6  于 2023-04-08  发布在  Go
关注(0)|答案(8)|浏览(148)

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

wkyowqbh

wkyowqbh1#

当CSS属性显示为删除线时,这意味着应用了被删除的样式,但随后被更具体的选择器、更局部的规则或同一规则中的后续属性覆盖。
(特殊情况:如果样式存在于匹配规则中但被注解掉,或者您在Chrome开发者工具中取消选中它而手动禁用了它,则样式也将显示为删除线。如果样式有语法错误,则它也将显示为划掉,但带有错误图标。)
例如,如果一个背景颜色应用于所有的div,但是另一个不同的背景颜色应用于具有特定id的div,第一种颜色将显示出来,但将被划掉,因为第二种颜色已经取代了它(在具有该id的div的属性列表中)。

kiayqfof

kiayqfof2#

除了以上的答案外,我还想强调一个令我感到惊讶的被剔除物业的例子。
如果您要将背景图像添加到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中你会看到background-size被删除了。我不知道为什么会这样,但是你肯定不想把它弄得一团糟。

thigvfpy

thigvfpy3#

顺便说一句,如果你使用**@media查询(如@media screen (max-width:500px),请特别注意在使用正常样式后应用@media query。因为如果后面跟着操作相同元素的css,@media query将被划掉(即使它更具体)。例如:

@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 **
vfhzx4xs

vfhzx4xs4#

如果你想应用样式,即使在得到了strik-trough指示之后,你可以使用"!important"来强制样式。这可能不是一个正确的解决方案,但解决了问题。

kkbh8khc

kkbh8khc5#

有两种方法可以知道哪些规则被覆盖:
1.在样式选项卡顶部的过滤器框中搜索属性。它将显示包含该属性的所有规则,属性以黄色突出显示。

1.在“计算”选项卡中查找相同的属性类型,然后展开该属性类型以查看尝试应用该属性的各种规则的源。

xienkqul

xienkqul6#

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

tuwxkamq

tuwxkamq7#

雅各布·马蒂森的最后一点解决了我的问题,“或者在同一规则下的后来的属性”。
确保将媒体查询放在CSS文件的底部。

/*Doesn't work  */
@media (max-width: 480px) {
  body {
    color: red;    
  }
}
body {
  font-family: system-ui;
  color: cornflowerblue;
  margin: 0;  
}
/* works!  */
@media (max-width: 480px) {
  body {
    color: green;    
  }
}

示例:
https://codepen.io/grumbles/pen/XWxWRJJ

epggiuax

epggiuax8#

在某些情况下,当您复制并粘贴CSS代码时,它会破坏格式,因此Chrome会显示黄色警告。您应该尝试重新格式化CSS代码,应该没问题。

相关问题