CSS选择器的优先级

要讲CSS选择器的优先级,我们首先要知道CSS选择器有哪些?具体可以参考CSS 选择器参考手册,同时我们还需要知道CSS选择器的解析原则。请阅读为什么CSS选择器是从右往左解析

在此只为各位列出最常用的几种选择器:

  • 标签选择器(如:body,div,p,ul,li)
  • 类选择器(如:class="head",对应css选择器为 .head)
  • ID选择器(如:id="name",对应css选择器为 #name)
  • 组合选择器(如:.head .head_logo,注意两选择器用空格键分开)
  • 后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)
  • 群组选择器 (如:div,span,img {color:Red} ,注意用逗号隔开)
  • 继承选择器(如:div p,注意两选择器用空格键分开)
  • 伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。
  • 子选择器 (如:div>p ,带大于号>)

当两个规则都作用到了同一个元素上时,如果定义的属性有冲突,那么应该用谁的值的,CSS有一套优先级的排序。 总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 注意:!important的作用是提升优先级,换句话说,加了这句的样式的优先级是最高的(比内嵌的优先级还高)。同一级别中后写的会覆盖先写的样式 如果遇到选择器组合进行比较,这时就要提到每种选择器的权重,CSS优先级的规则就是权重大的选择器优先于权重小的选择器,我们可以把选择器中如下对应等级做加法,比较权值,如果权值相同那就后面的覆盖前面的。 4个等级的定义如下: 第一等:代表内联样式,如: style=””,权值为1000。 第二等:代表ID选择器,如:#content,权值为100。 第三等:代表类,伪类和属性选择器,如.content,权值为10。 第四等:代表类型选择器和伪元素选择器,如div p,权值为1。 注意:权值实际并不是按十进制,用数字表示只是说明思想,一万个class也不如一个id权值高。而通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。

举个栗子:

    <style>
    #content div#main-content h2 {
        color: red;
    }
    #content #main-content>h2 {
        color: blue;
    }
    body #content div[id="main-content"] h2 {
        color: green;
    }
    #main-content div.paragraph h2 {
        color: orange;
    }
    #main-content [class="paragraph"] h2 {
        color: yellow;
    }
    div#main-content div.paragraph h2.first {
        color: pink;
    }

    </style>

    <body>
        <div id="content">
            <div id="main-content">
                <h2>CSS简介</h2>
                <p>CSS是一组格式设置规则,用于控制web页面的外观。</p>
                <div class="paragraph">
                    <h2 class="first">使用CSS布局的优点</h2>
                    <p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的标准</p>
                </div>
            </div>
        </div>
    </body>

让我们来一起算算栗子中六个样式规则各自的特殊性的值: 第一个特殊性的值=2×100+2×1=202(red) 第二个特殊性的值=2×100+1=201(blue) 第三个特殊性的值=1×100+1×10+3×1=113(green) 第四个特殊性的值=1×100+1×10+2×1=112(orange) 第五个特殊性的值=1×100+1×10+1×1=111(yellow) 第六个特殊性的值=1×100+2×10+3×1=123(pink) 清楚了吧,第一个样式规则以其202的高分一举夺得了本次样式选择器特殊性大赛的冠军,后面一些规则虽然看起来好像更复杂,但特殊性并不是拼谁的选择器表达式写得更长,权重高才是王道!

另外一种理解方式: CSS优先级:是由四个级别和各级别的出现次数决定的。 四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符。 优先级的算法: 每个规则对应一个初始"四位数":0、0、0、0 若是 行内选择符,则加1、0、0、0 若是 ID选择符,则加0、1、0、0 若是 类选择符/属性选择符/伪类选择符,则分别加0、0、1、0 若是 元素选择符/伪元素选择符,则分别加0、0、0、1 算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。

再看个栗子:

    <style>
        a {
            color: yellow;
        } /*0,0,0,1*/ 
        div a {
            color: green;
        } /*0,0,0,2*/ 
        .demo a {
            color: black;
        } /*0,0,1,1*/ 
        .demo input[type="text"] {
            color: blue;
        } /*0,0,2,1*/ 
        .demo *[type="text"] {
            color: grey;
        } /*0,0,2,0*/ 
        #demo a {
            color: orange;
        } /*0,1,0,1*/ 
        div#demo a {
            color: red;
        } /*0,1,0,2*/
    </style>
    <body>
        <a href="">第一条应该是黄色</a>
        <!--适用第1条CSS规则-->
        <div class="demo">
            <input type="text" value="第二条应该是蓝色" />
            <!--适用第4、5条CSS规则,第4条CSS优先级高-->
            <a href="">第三条应该是黑色</a>
            <!--适用第2、3条CSS规则,第3条CSS优先级高-->
        </div>
        <div id="demo">
            <a href="">第四条应该是红色</a>
            <!--适用第5、6条CSS规则,第6条CSS优先级高-->
        </div>
    </body>

注意:

  1. !important的优先级是最高的,但出现冲突时则需比较”四位数“;
  2. 优先级相同时,则采用就近原则,选择最后出现的样式;
  3. 继承得来的属性,其优先级最低;

建议:css选择器使用强烈建议采用低权重原则,利于充分发挥css的继承性,复用性,模块化、组件化。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

开发 | 「小游戏」开发难?不妨先从 2048 入手试试看

最近流行微信「跳一跳」小游戏,我也心血来潮写了一个微信小程序版 2048,本篇文章主要分享实现 2048 的算法以及注意的点,一起来学习吧!

1414
来自专栏Golang语言社区

【Go 语言社区】HTML5 canvas验证码识别

canvas 的历史这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把...

4764
来自专栏听雨堂

从MapX到MapXtreme2004[9]-标注的强调显示

        如果想要将一个选中的图元强调显示,用红色醒目的文字显示的话,我的思路如下:             1、不可能直接改原先的图元,所以必须要在一个...

2115
来自专栏用户2442861的专栏

python数字图像处理(12):基本图形的绘制

skimage.draw.set_color(img, coords, color)

1842
来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习(1)

本文以问答形式主要讲述Quartz2D的相关内容,参考内容是网上下载的学习视频资料。

842
来自专栏小灰灰

cocos2dx-v3.4 2048(四):单元格的设计与实现

前言 ---- 单元格即显示2、4、8等数字的不同颜色的方格,如下图。本项目中Grid类实现单元格的相关内容,包括数字、背景更新,移动、新增、消除特效 ? ...

2026
来自专栏前端知识分享

第157天:canvas基础知识详解

    github地址: https://github.com/malun666/AndyJS2

2882
来自专栏HTML5学堂

原生JS | 导航底部横线跟随鼠标缓动

HTML5学堂(码匠):在上周当中,我们用jQuery实现了 - 在导航底部存在一条横线,跟随着鼠标缓动到相应导航项 - 的特效,今天我们来讲讲原生JS的实现方...

6128
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(二)文本、标签、特性

当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

1046
来自专栏小灰灰

Java 实现长图文生成

长图文生成 很久很久以前,就觉得微博的长图文实现得非常有意思,将排版直接以最终的图片输出,收藏查看分享都很方便,现在则自己动手实现一个简单版本的 目标 首先定...

3927

扫码关注云+社区

领取腾讯云代金券