CSS选择器特异性比较

CSS选择器的特异性（specificity）是一种用来决定哪些样式规则优先应用于匹配的元素的机制，它是根据选择器中不同类型的条件的数量来计算的。

CSS选择器的特异性可以用一个四位的数字（a-b-c-d）（四元数x）来表示，其中每一位代表一个特定类型的条件的数量，从左到右依次是：

• a：内联样式，即在HTML元素上使用style属性定义的样式，它的特异性最高，为1000。
• b：ID选择器，即使用元素的ID属性来选择元素，它的特异性次之，为100。
• c：类选择器、属性选择器和伪类，它们的特异性相同，为10。
• d：标签选择器和伪元素，它们的特异性相同，为1。

例如，以下选择器的特异性分别是：

• div：0001
• div p：0002
• .foo：0010
• div.foo：0011
• #bar：0100
• div#bar：0101
• div#bar.foo：0111
• style="color: red;"：1000

当一个元素匹配多个选择器时，会按照以下规则来决定哪个选择器的样式优先应用：

• 如果有内联样式，那么内联样式优先。
• 如果没有内联样式，那么比较ID选择器的数量，数量多的优先。
• 如果ID选择器的数量相同，那么比较类选择器、属性选择器和伪类的数量，数量多的优先。
• 如果类选择器、属性选择器和伪类的数量相同，那么比较标签选择器和伪元素的数量，数量多的优先。
• 如果标签选择器和伪元素的数量相同，那么按照样式规则在文档中出现的顺序，后出现的优先。
• 此外，如果某个CSS属性有!important修饰，那么会无视上述规则，权重最高。（再加一元更好kana）

总的来说，就是按照四位数的大小进行比较，!important最高，相同权重取则决于后出现的属性。

例如：

<div id="card" class="foo" style="color: red;">
    hello
    <p id="content" class="foo">world</p>
</div>

<style>
    div {
        color: blue;
    }

    p {
        color: green;1
    }

    .foo {
        color: yellow;
    }

    p#content {
        color: purple;
    }
    
    #card p {
        color: orange;
    }
</style>

那么<div>元素匹配了以下四个选择器：

• div：0001
• .foo：0010
• #card：0100
• style="color: red;"：1000

其中内联样式style="color: red;"具有最高的特异性（1-0-0-0），所以<div>元素的颜色是红色：hello。（咦）

而<p>元素匹配了以下五个选择器：

• p：0001
• div p：0002
• .foo：0010
• p#content：0100
• #card p：0101

其中ID选择器p#content和#card p具有相同的、最高的特异性（0-1-0-1），但是后者在文档中出现在后面，所以<p>元素的颜色是由它决定的，即橙色：world。（咦）