前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS选择器是如何确定优先级的?

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

作者头像
dys
发布2018-04-03 11:13:14
1.1K0
发布2018-04-03 11:13:14
举报
文章被收录于专栏:性能与架构

先看下面的示例

代码语言:javascript
复制
<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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2015-11-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 JAVA高性能架构 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档