IE 开发人员工具 - css 属性以红色删除线表示

Question

我决定在我的 Web 应用程序中使用第三方提供商的 css、图像和 javascript 来弥补。

我很好奇这个包 (css+image+js) 是如何工作的，所以当我访问网络应用程序的资源时，我通过按 F12 激活了 IE 的开发者工具。

我注意到一些 css 属性有红色删除线。我想知道这是什么意思...

非常感谢您对此事的意见。

Answer 1

这意味着这些属性正在被代码中其他地方的更具体的规则覆盖。

例如，拿这个代码：

#someId {color:red;}
p {color:blue;}

<p id="someId">My Text</p>

在这种情况下，两个 CSS 规则都适用于该段落，但该段落的文本颜色将是红色，而不是蓝色，因为 ID 规则 (#) 比元素规则 ( p).

如果您查看包含此代码的页面，您会看到 p 规则中有一条线穿过它，告诉您它已被覆盖。

Answer 2

IE 开发工具显示所有与当前对象匹配的样式，包括被其他样式覆盖的样式。

被覆盖的样式以删除线效果显示，以明确它们不是有效的样式，但它们仍然显示，因此您可以看到浏览器如何确定要呈现的内容。

如果您通过取消选中来禁用活动样式，则序列中的下一个匹配样式将生效，删除线效果将从中移除。这使您可以轻松地实时试验样式，并轻松查看更改 CSS 代码的效果。

Answer 3

表示CSS重新定义为CSS、Javascript、html。 Example:if 你将定义：在 css 文件中：

 p {color:blue}

和html文件

 <p id="someId" style="color: red">My Text</p>

和 javscript 文件或 jquery 文件这是 jquery 代码

 ("#someId").css('color', 'yellow');

结果为黄色在这里，p {color:blue} 行有红色删除线换句话说，这是优先事项。 css的优先级是五种。如果定义为Top 方法，则四种都有红色删除线。示例：top 方法是

  <p id="someId" style="color: red !important;">My Text</p>

IE developer tools - css properties are strikethrough in red