1

根据此来源，当同一元素上存在冲突的 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但我得到了相反的结果（见下图）

在此处输入图像描述

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

4

4 回答 4

4

外部 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 选择器具有尽可能低的特异性，因为这会使它们更容易被覆盖。

于 2013-01-05T02:40:01.463 回答
3

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

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

于 2013-01-05T02:40:07.990 回答
2

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

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

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

于 2013-01-05T09:10:58.697 回答
1

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

于 2013-01-05T02:40:48.513 回答