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

Question

在使用Chrome的devtools检查元素时，在元素选项卡中，右侧的“样式”栏显示相应的CSS属性。有时，其中一些属性是突破性的。这些属性意味着什么？

Answer 1

当CSS属性显示为触发时，表示已应用划掉的样式，但后来被更具体的选择器，更本地的规则或同一规则中的更新属性覆盖。

（特殊情况：如果匹配规则中存在某个样式但已被注释掉，或者您通过在Chrome开发者工具中取消选中它来手动禁用该样式，则样式也会显示为触发式。显示为划掉，但带有错误图标，如果样式有语法错误。）

例如，如果背景颜色应用于所有div，但是将不同的背景颜色应用于具有特定ID的div，则第一种颜色将显示但将被交叉out，因为第二种颜色已替换它（在具有该id的div的属性列表中）。

Answer 2

旁注。如果您使用 @media 查询（例如for(h in 1:length(hospitals)){ row.idx <- which(grepl(paste0(hospitals[h],":"),hospital.subject)==T) col.idx <- which(grepl(paste0(hospitals[h],":"),hospital.drug)==T) for(i in 1:length(col.idx)){ drug <- strsplit(hospital.drug[col.idx[i]],split=":")[[1]][2] impute.idx <- which(grepl(paste0(":",drug,"$"),hospital.drug,perl=T)==T)[-col.idx[i]] mat[row.idx,impute.idx] <- rnorm(length(row.idx)*length(impute.idx),mean=median(mat[row.idx,col.idx[i]]),sd=mad(mat[row.idx,col.idx[i]])) } } ））请特别注意应用@media查询 AFTER ，您将完成正常样式。因为@media查询将被删除（即使它更具体），如果后面跟着操纵相同元素的css。例如：

@media screen (max-width:500px

Answer 3

除了上述答案之外，我还要强调一个令我感到惊讶的财产案件。

如果要将背景图像添加到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 被删除。 我不知道为什么会这样，但是你不想搞砸它。

Answer 4

如果您想要在获得敲击线指示后应用该样式，您可以使用"!important"来强制执行该样式。它可能不是一个正确的解决方案，但可以解决问题。

Answer 5

有两种方法可以知道哪些规则被覆盖：

1. 在“样式”选项卡顶部的“过滤器”框中搜索属性。它将显示包含该属性的所有规则，并以黄色突出显示该属性。

   

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

   

Answer 6

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