专栏首页性能与架构CSS选择器是如何确定优先级的?

CSS选择器是如何确定优先级的?

先看下面的示例

<div id="content">
    <p id="title">Hello world</p>
</div>

有如下的2个css选择器

#title { color: red; }

#content p { color: blue; }

他们都是设置 p 标签内字体的颜色,哪个会生效呢?

这就涉及到了css选择器优先级的积分规则

css为选择器设置了4个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越

可以把它看成一个4位数:0.0.0.0,数值越大的优先级越高

例如: 0.1.0.0 > 0.0.1.2

各种选择器的具体分值

行内样式(style属性定义的样式)

1,0,0,0

ID选择器(#ID)

0,1,0,0

类选择器(.classname)、属性选择器([attr=val])、伪类选择器(:link)

0,0,1,0

元素(类型)选择器(HTML标签)

0,0,0,1

通用元素选择器(*)、伪类:not选择器、连接符(>)

0,0,0,0

示例

(1)ul#nav li.active a

包含3个元素选择器,1个ID选择器,1个类选择器

0,0,0,3

0,1,0,0

0,0,1,0

各位相加后,结果为

0,1,1,3

(2)#footer *:not(nav) li

包含1个ID选择器,1个通用元素选择器,一个伪类:not选择器,2个元素选择器

0,1,0,0

0,0,0,0

0,0,0,0

0,0,0,2

各位相加后,结果为

0,1,0,2

(3)html > body div [id="testid"] ul li > p

6个元素选择器,1个属性选择器,2个连接符

0,0,0,6

0,0,1,0

0,0,0,0

0,0,0,0

各位相加后,结果为

0,0,1,6

本文分享自微信公众号 - 性能与架构(yogoup),作者:杜亦舒

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-11-10

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS选择器的性能优化

    CSS选择器的性能排名(从最快者开始): (1)识别器:#id (2)类:.class (3)标签:div (4)相邻兄弟选择器:a + i (5)父类选择器:...

    dys
  • 网站 cache control 最佳实践

    通常,是因为 cache control 缓存控制策略定义不正确,导致服务端最新部署之后客户端没有接收到最新的更改。

    dys
  • 网站架构演化过程

    网站的架构通常都是逐渐演化完善的,下面就是一个常规的成长过程 (1)初识阶段 一台服务器 最初的架构,应用程序、数据库、文件都部署在一台服务器上 ? (2)...

    dys
  • css选择器

                选择器{... !important} 则该选择器的优先级最高

    十月梦想
  • css选择器类型

    5、后代选择器/包含选择器(所有子后代元素):用来选定特定元素或元素组的后代。格式:父元素   子元素{    },对于多层祖先后代关系,可以多个空格分开,如i...

    bye
  • 【融职培训】Web前端学习 第2章 网页重构5 css选择器进阶

    上一节我们已经掌握了常用css选择器和css的一些常用属性,本节我们进一步扩展css选择器的内容包括内容如下:

    学习猿地
  • Web前端学习 第2章 网页重构5 css选择器进阶

    上一节我们已经掌握了常用css选择器和css的一些常用属性,本节我们进一步扩展css选择器的内容包括内容如下:

    学习猿地
  • 前端基础-CSS伪类选择器和类选择器一起使用

    cwl_java
  • 爬取数据不是非要Python

    最近有朋友问是否可以不用Python编程就能爬取数据并分析,想起来正好之前写了一篇文章,关于Web Scraper的使用,由于之前忘记标记原创,今天就再发一次。...

    用户1564362
  • 前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

    suwanbin

扫码关注云+社区

领取腾讯云代金券