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!

2019/4/8补充: 关于CSS选择器的权重计算方法纠正


推荐阅读更多精彩内容

  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    前端小少女阅读 532评论 0 5
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 1,600评论 0 39
  • CSS四种引用方式 1.行内样式在四种引用方式中优先级最高,是在 html 标签上写 style 样式,一般不推荐...
    亚萍阅读 95评论 1 0
  • 一、样式类型 1、行间 我的行间CSS样式。 2、内联 h1{font-size:12px; color:#000...
    宁骥阅读 42评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,688评论 1 83