令人困惑的 CSS 类/样式顺序

Question

谁能向我解释为什么我的 CSS 类名顺序没有得到尊重？即使 .x14/.x15 直接是 HTML 中的样式，它们仍然是类名？

干杯

Answer 1

CSS 作品基于声明的特异性和顺序，在您的情况下 .x14 和 .x15 似乎是内联样式，这在样式存档中具有类元素的优先级，因此 内联样式 > 文件样式

下面是一个具体的列表和他从最低优先级到最高优先级的顺序

通用选择器

*{
   background: red;
 }

页面上所有元素的此属性现在将具有红色背景

类选择器

.foo{
  background: green;
}

这将为具有 foo 类的元素设置绿色背景

选择器属性

a[target="_blank"]{
  color: blue;
}

这将仅匹配具有 target="_blank"

的 a 元素

伪类

div:hover{
  background: yellow;
}

当鼠标悬停这个

时，这将在每个 div 中设置一个黄色背景

ID 选择器

#foo{
  background: pink;
}

这将为只有一个设置了 id foo 的元素设置背景粉红色（id 是唯一的）

内联样式

<style>
  .foo{
    background: purple;
  }
</style>

作为内联样式，它将覆盖css文件中设置的.foo类，并将绿色背景改为紫色背景

---

而且css还有另外两个特殊性应该被覆盖

重要属性

.foo{
   background: gray !important;
}

这将覆盖之前在 .foo 类上设置的所有背景样式

不是伪元素

h1:not(.foo){
  font-size: 1rem;
}

这将为所有 h1 设置减去具有类 foo

的所有 h1

---

希望它可以帮助您和许多其他开发人员解决有关 css 特异性的问题。