Google Chrome devtools中的交叉样式属性是什么意思？
roh*_*hra 252 css google-chrome google-chrome-devtools
在使用Chrome的devtools检查元素时,在元素选项卡中,右侧的"样式"栏显示相应的CSS属性.有时,其中一些属性是突破性的.这些属性意味着什么？
Jac*_*son 294
当CSS属性显示为触发时,表示已应用划掉的样式,但后来被更具体的选择器,更本地的规则或同一规则中的更新属性覆盖.
(特殊情况:如果匹配规则中存在样式但已注释掉,或者如果您通过在Chrome开发人员工具中取消选中它来手动禁用该样式,则样式也将显示为触发式.它还将显示为交叉out,但带有错误图标,如果样式有语法错误.)
例如,如果背景颜色应用于所有divs,但是对div具有特定id的s 应用了不同的背景颜色,则第一种颜色将显示但将被划掉,因为第二种颜色已替换它(在属性中)div具有该id的列表).
- @JacobM:如何知道哪个属性覆盖了被攻击的属性. (54认同)
- @ArunRaj - 没有一种简单的方法可以判断哪个属性(或多个属性)覆盖了划掉的属性.一个选项是查看"计算"样式选项卡以查找相同的属性类型,然后如果展开它,您应该看到尝试应用该属性的各种规则的来源(包括实际处于活动状态的那个) .因此,如果您看到"font-size:11px"被划掉,请查看"font-size"的计算属性,您应该看到应用了font-size的所有位置,包括实际活动的位置.希望这可以帮助. (48认同)
- 在旁注中,划掉的属性可以是稍后在相同CSS规则中由相同命名的属性"取消"的(根据CSS规范的要求). (18认同)
- 现在,"样式"选项卡顶部有一个"过滤器"框.如果你想知道什么覆盖了`border-color`,那么只需在Filter中键入`border-color`即可.它将显示包含该属性的所有规则,并以黄色突出显示该属性.[此功能](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2015/05/inspector-filter-styles.png)也可在Firefox中使用. (6认同)
- 还想补充一点:如果一个样式被淘汰但它已经位于顶部,那么你可能会在某个地方使用`!important`来覆盖它. (4认同)
- 就其价值而言，由于在我的情况下价值无效，因此它被划掉了。最大宽度：100；被划掉，因为它应该是 max-width: 100px; (3认同)
san*_*han 11
在旁注.如果您正在使用@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 **
Ris*_*tta 10
除了上面的答案,我还要强调一个惊慌失措的财产,这真的让我感到惊讶.
如果要将背景图像添加到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”是包含“background-size”的普通写法，如果未定义，则为“auto”；如果图像既没有固有宽度也没有固有高度，则为“contain”。更令人惊讶的是，IS 应用的值可以被删除，例如。`html { font-size: 1rem } p { font-size: 2rem }` 或 `div { color: red } div > p { color: currentColor }`。 (2认同)
有两种方法可以了解哪些规则被覆盖：
在“样式”选项卡顶部的“过滤器”框中搜索属性。它将显示包含该属性的所有规则，并以黄色突出显示该属性。
在“计算”选项卡中查找相同的属性类型，然后展开它以查看尝试应用该属性的各种规则的来源。
