特殊性

CSS 权威指南笔记 /

什么是特殊性

下方例子，段落 p 的文字大小都是 20px, 因为 p 元素继承了 div 的样式。

<style>
    div {font-size:20px;}
</style>
<div>
    i am 20px text
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

假如我想让 p 的文本是 10px，那么可以这么做：

div p {font-size:10px;}

再假如我只想让前两个 p 段落文本 10px，

<style>
    .px10 {font-size:10px;}
</style>
<div>
    i am 20px text
    <p class="px10">1</p>
    <p class="px10">2</p>
    <p>3</p>
</div>

可以发现范围越来越精确了，div 下的每个元素，不再保持继承的样式，都有了特定的样式了，这叫特殊性，特殊性与继承相对。

那么 css 在众多选择器中，如何将最终的样式应用到元素上呢？如div{}，div p {}，.px10 三个选择器作用到了 p 元素。

实际是通过计算的来的，特殊性是一个计算的「值」。

特殊性值的名称是 specificity，格式是 0,0,0,0。简单来说，范围越小，越精确 的特殊性值越大

特殊性

下面分析上方选择器的特殊性值：

div 继承，没有特殊性，0,0,0,0
div p，元素选择器，两个元素，0,0,0,2
.px10，类选择器，0,0,1,0

因为 0,0,1,0 值大于 0,0,0,2 所以 .px10 胜出，最终.px10{font-size:10px;}作用到了 p 元素。

注意重点，范围越大的特殊性越低，范围越小的、越精确的特殊性越高。那么第一个 0 是留给谁的？第一个 0 是留给内联样式的，<p style="font-size:100px;">，它的特殊性为 1,0,0,0。内联样式特性最高，即使 id 选择器也不例外。

如何理解内联样式特殊值最高？你可以理解为用户代理（浏览器）在解读代码时，如果发现有 style="font-size:100px;" 那么其他选择器中的 font-size 都无效。再者假设临时紧急将一个元素文本大小改为 100px，最直接有效的不是去到纷杂的 css 文件中去找样式，而是找到代码，直接 style=""。

本文章首发在 LearnKu.com 网站上。

Markdown 文本