css - 混淆 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 还有另外两个特殊性应该被覆盖

重要属性(property)

.foo{
   background: gray !important;
}

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

不是伪元素

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

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

的 h1

---

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