CSS对象分辨率

如果CSS中的两个类具有相同的派生类，CSS如何解析适当的类

例如：

.ClassA.Left {}
.ClassB.Left {}
.Left {}

既然类“Left”可以应用于任何对象，我如何确保它是我想要的对象？

---

绑定“Left”时使用的优先级是什么？

任何带有

.Left

的类都将获得

.Left

中应用的样式，除非它也有

ClassA

（

class=“Left ClassA”

），否则它将从

.Left

和

.ClassA.Left

中获取样式，由于具有更高的特异性，

ClassA.Left

优先。同样的规则也适用于

class=“Left ClassB”

关于专一性，请参见此处：

特异性 概念 特定性是浏览器决定哪个属性的方法 值是与元素最相关的，可以应用。 特异性仅基于由以下内容组成的匹配规则： 不同种类的选择器

如何计算？ 特异性是通过连接 每个选择器都会键入。它不是应用于该对象的权重 对应的匹配表达式

在特殊性相等的情况下，在 CSS应用于元素

注意：文档树中元素的接近程度对 特异性

新月特异性顺序 以下选择器列表是通过增加特异性来实现的：

• 通用选择器
• 类型选择器
• 类选择器
• 属性选择器
• 伪类
• ID选择器
• 内联样式

这个重要例外 当一个！重要规则用于样式声明，如下所示 声明将覆盖CSS中的任何其他声明（无论在何处） 它在申报单上。虽然!！重要的事与此无关 具有特异性

答案：也不例外 否定伪类：not在中不被视为伪类 特异性计算。尽管如此，选择器仍放置在 否定伪类计数为正常选择器

---

来源：

同样，如果元素包含所有三个类（ClassA、ClassB和Left），那么类在CSS表中列出的顺序很重要

.ClassA.Left将被.ClassB.Left击败（对于公共属性），因为.ClassB.Left在级联中处于较低的位置

单个类选择器被多个类选择器击败，因此.ClassA.Left beats.ClassA

HTML中类的源顺序不是一个因素

查看：