为什么我看到外部 CSS 覆盖嵌入式 CSS？答案

【问题标题】：Why do I see external CSS overriding embedded CSS?为什么我看到外部 CSS 覆盖嵌入式 CSS？
【发布时间】：2013-01-05 02:35:16
【问题描述】：

根据this source，当同一元素上存在冲突的 CSS 样式时，嵌入样式会覆盖外部样式，但我没有观察到。

我有以下 HTML（简体）：

<html>
<head>
  <link rel="stylesheet" type="text/css" href="foundation.min.css" />
  <style type="text/css">
  .dialog_error_container
  {
    display: none;
  }
  </style>
</head>
<body>
  <div class="dialog_error_container alert-box alert">...</div>
</body>
</html>

我希望看到为 .dialog_error_container 定义的规则优先于为 div.alert-box 定义的规则，但我得到了相反的结果（见下图）

请向我解释为什么嵌入样式不会覆盖外部样式。

【问题讨论】：

我认为是因为嵌入式 css 不够具体。你可能想试试。 .dialog_error_container.alert-box.alert { display: none; }

标签： css

【解决方案1】：

外部 CSS 和嵌入式 CSS 没有区别——它们的处理方式完全相同。它不覆盖的原因是因为div.alert-box 比.dialog_error_container 更具体。分解特异性：

div.alert-box 获得 0,0,1,1 的特异性，因为它有 1 个类和 1 个元素。
.dialog_error_container 获得 0,0,1,0 的特异性，因为它有 1 个类。

如果这两个的特异性相同，那么最后定义的那个获胜。

请注意，通常最好让您的 CSS 选择器具有尽可能低的特异性，因为这样更容易覆盖它们。

【讨论】：

在计算特异性时，不添加类和元素选择器。这里的特异性是 0,0,1,1 和 0,0,1,0。检查规格，或使用计算器css-specificity.webapp-prototypes.appspot.com
@JukkaK.Korpela 这就是我在疲倦时回答的结果——谢谢！

【解决方案2】：

那个链接让你误入歧途。嵌入式和外部样式具有相同级别的特异性，然后归结为选择器。在这种情况下，div.alert-box 比 .dialog_error_container 更具体

使用您所拥有的创建您所追求的行为的最简单方法是将嵌入式选择器更改为div.dialog_error_container

【讨论】：

【解决方案3】：

引用的来源有误。查看权威规范：CSS 2.1，第 6.4.1 条Cascading order。关于“来源”，外部样式表和嵌入样式表都是“作者样式表”。因此，下一个标准是特异性，.dialog_error_container（只是一个类选择器）不如div.alert-box（元素类型选择器与类选择器相结合）具体。

使用div.dialog_error_container 会使特异性相等。然后“按顺序排序”将介入，嵌入的样式表将胜出——不是因为被嵌入，而是因为更晚（在这种情况下，style 元素出现在 @987654326 之后@ 引用外部样式表的元素）。

因此，提高特异性会更安全（防止未来对样式表进行重组），例如通过使用body div.dialog_error_container（有点人工，但它有效，并且比使用!important更好，这应该是最后的手段）。

【讨论】：

【解决方案4】：

可能外部css会覆盖嵌入样式，因为它更具体；它有div.alert-box 的规则，既是一个元素又是一个类，而嵌入式样式有.dialog_error_container，一个类。

【讨论】：