混乱的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;
}

这只会为设置了 foo ID（ID是唯一的）的一个元素设置背景粉红色。

内嵌样式

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

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

---

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

重要财产

.foo{
   background: gray !important;
}

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

非伪元素

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

这将为所有h1减去类别为 foo

的那些变量设置

---

希望它对您和CSS开发人员的疑问有帮助。