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

使用Chrome的devtools检查元素时,在元素标签中,右侧的“样式”栏显示相应的CSS属性。 有时,这些属性中的一些是通过的。 这些属性是什么意思?

5 Solutions collect form web for “Google Chrome devtools中的交叉样式属性是什么意思?”

当CSS属性显示为直通式时,这意味着划叉样式已应用,但是会被更具体的select器,更多本地规则或同一规则中的更高版本属性覆盖。

(特殊情况:如果某个样式存在于匹配的规则中,但该样式已被注释掉,或者您已通过在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; } 

然后在铬中,你会看到背景大小一样。 我不知道这是为什么,但是你不想惹它。

在旁边注意。 如果您正在使用@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 ** 

如果您想要在应用样式后即使在触发指示之后,也可以使用"!important"来强制执行样式。 这可能不是一个正确的解决scheme,但解决了这个问题。

在某些情况下,如果您将CSS代码复制并粘贴到某个地方,则会破坏格式,Chrome会显示黄色警告。 你应该尝试重新格式化的CSS代码,它应该没事。

  • CSS:如何删除伪元素(之后,之前,...)
  • input的图像标签不能在IE11中点击
  • 将背景图像(.png)添加到SVG圆形状中
  • 是否有可能使任何CSS元素的行为像<pre>
  • CSS:如何获得这个覆盖滚动扩展100%?
  • 柔性容器中的文本不包装在IE11中
  • 修复了与ios7的背景图像
  • 是不是很愚蠢,一个小的图标需要另一个HTTP请求? 如何使favicon进入精灵?
  • CSS“和”select器 - 我可以select具有多个类的元素吗?
  • 允许div覆盖整个页面而不是容器内的区域
  • Twitter引导程序崩溃:更改切换button的显示