Question

根据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的规则，但我得到了相反的结果（见下图）

enter image description here

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

Answer 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选择器具有尽可能低的特异性，因为这样可以更容易覆盖。

Answer 2

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

更具体

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

Answer 3

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

使用div.dialog_error_container代替特异性。然后“按顺序排序”将介入，嵌入式样式表将获胜 - 不是因为被嵌入而是因为稍后（在这种情况下style元素出现在引用外部样式表的link元素。）

因此，为了使特异性更高，将更安全（对于样式表的未来重组），例如，使用body div.dialog_error_container（有点人为，但它有效，并且比使用!important更好，这应该是最后的选择）。

Answer 4

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

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

4 个答案: