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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AndroidTv

前端入门4-CSS属性样式表声明正文-CSS属性样式表

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

1103
来自专栏前端之路

–探索CSS3动画、过渡

1295
来自专栏进击的君君的前端之路

CSS常见样式(一)

2723
来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

1144
来自专栏Android干货

CSS基本知识(慕课网)

3946
来自专栏十月梦想

表格属性(特有)

       设置边框前提border-collapse取值为sparete(不合并),

973
来自专栏Android先生

Android开发人员初识前端

<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更...

1313
来自专栏向治洪

react-native 之布局总结

前言 之前我们讲了很多react-native的基础控件,为了方便大家的理解,我们来对react-native的布局做一个总结,观看本节知识,你将看到。 宽度单...

6628
来自专栏coding for love

CSS入门10-替换元素和非替换元素,块级元素和行内元素

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

780
来自专栏小灰灰

Css学习手册之基本篇

Css学习手册之基本篇 每次写前端都是一个痛苦的过程,总是静不下来,彻底的研究下前端的技术,导致每次套页面都是直接采用一些封装好的控件,而有时对这些样式不满意时...

4256

扫码关注云+社区

领取腾讯云代金券