CSS选择器的权重与优先级

选择器权重计算

共分为4个等级：

• 第一等：代表内联样式，如: style="xxx"，权值为1000。
• 第二等：代表ID选择器，如：#content，权值为100。
• 第三等：代表类，伪类和属性选择器，如.content，:hover，[attribute]，权值为10。
• 第四等：代表元素选择器和伪元素选择器，如div，p，权值为1。

注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。

---

一些案例：

一些test

自己拿些例子，下面是一段HTML代码的CSS样式，知道最后h2标签是什么颜色吗？

#content div#main-content h2{
    color:red;
}
//    100(#content) + 1(div) + 1000(#main-content) + 1(h2) = 202

---

#content #main-content>h2 {
    color:blue
}
//    100(#content) + 1000(#main-content) + 1(h2) = 201

---

body #content div[id="main-content"] h2 {
    color:green;
}
//    1(body) + 100(#content) + 1(div) + 10([id="main-content"]) + 1(h2) = 113

---

#main-content div.paragraph h2 {
    color:orange;
}
// 100(#main-content) + 1(div) + 10(.paragraph) + 1(h2) = 112

---

#main-content [class="paragraph"] h2 {
    color:yellow;
}
// 100(#main-content) + 10(class="paragraph") + 1(h2) = 111

---

div#main-content div.paragraph h2.first {
    color:pink;
}
// 1(div) + 100(#main-content) + 1(div) + 10(.paragraph) + 1(h2) + 10(.first) = 123

这里是HTML代码：

        <div id="content">
            <div id="main-content">
                <h2>CSS简介</h2>
                <p>CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。</p>
                <div class="paragraph">
                    <h2 class="first">使用CSS布局的优点</h2>
                    <p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
                </div>
            </div>
        </div>

知道是什么颜色了吗？yeah,and the Red!

---