CSS 特异性

什么是特异性？

如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。

将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。

通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！

注意：这种特异性是 CSS 规则不适用于某些元素的常见原因，尽管您可能会认为应该适用。

特异性层次

每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：

行内样式 - 行内（内联）样式直接附加到要设置样式的元素。实例：

。

ID - ID 是页面元素的唯一标识符，例如 #navbar。

类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类，例如：:hover、:focus 等。

元素和伪元素 - 此类别包括元素名称和伪元素，比如 h1、div、:before 和 :after。

如何计算特异性？

请您牢记计算特异性的方法！

从 0 开始，为 style 属性添加 1000，为每个 ID 添加 100，为每个属性、类或伪类添加 10，为每个元素名称或伪元素添加 1。

请思考以下三个代码片段：

实例

A: h1
B: #content h1
C: 
Heading
  • A 的特异性为 1（一个元素）
  • B 的特异性为 101（一个 ID 引用以及一个元素）
  • C 的特异性为 1000（行内样式）

由于 1 < 101 < 1000，因此第三条规则（C）具有更高的特异性，所以将被应用。

特异性规则 1：

在特异性相同的情况下：最新的规则很重要 - အခြား အချက် တစ်ခု ပြုလုပ်ပြီး အခြား အချက် ပြုလုပ်သော အစီအစဉ် ကို ပြင်ဆင်လိုက်သော အစီအစဉ် က အဆက်ပြတဲ့ အစီအစဉ် နောက်ဆုံးအဆင့်တွင် အသုံးပြုလိမ့်မည်:

实例

h1 {background-color: yellow;}
h1 {background-color: red;}

亲自试一试

နောက်ဆုံး ချက် က အခြား ချက် ကို အသုံးပြုလိမ့်မည်

အမှုထမ်းရေး ချက် 2:

ID ရွေးချယ်တာ က အခြား အခြား အစီအစဉ် ကို အသုံးပြုသူ ရွေးချယ်တာ က အမှုထမ်းရေး အဆင့် ကြီးသည် - အောက်ပါ သုံးခု အစီအစဉ် ကို ကြည့်ပါ:

实例

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

亲自试一试

ပထမဆုံး ချက် က အခြား နှစ်ချက် ထက် အသေးစိတ်အပ်၍ အသုံးပြုလိမ့်မည်

အမှုထမ်းရေး ချက် 3:

နောက်ဆုံး ရွေးချယ်တာ အသုံးပြုသူ ရွေးချယ်တာ က တစ်ခုတည်းသော အစီအစဉ် ကဲ့သို့ အသေးစိတ်အပ်သည် - အဆက်ပြတဲ့ စနစ်များ ကို ပြင်ဆင်လိုက်သော အစီအစဉ် နောက်ဆုံးအဆင့်တွင်:

实例

အပြင်ဘက် ပေါ်ထွင်းတင်သော အစီအစဉ်:

#content h1 {background-color: red;}

在 HTML 文件中：

将适用后一条规则。

特异性规则 4：

类选择器会击败任意数量的元素选择器 - 类选择器（诸如 .intro 会击败 h1、p、div 等）：

实例

.intro {background-color: yellow;}
h1 {background-color: red;}

亲自试一试

此外，通用选择器以及被继承的值拥有 0 - * 的特异性，body * 及类似拥有 0 的特异性。被继承的值的特异性也为 0。