CSS选择器的优先级计算

一、引言：

这个问题，实际开发我们肯定遵循以“越具体权重越高”为原则，所以一般不会出现这样的问题，即便出现了问题也知道该怎么解决，但是笔试，或者面试这种题很容易出现这种题，对于我来错出错率特别高！所以整理一下

二、知识储备：

说出你知道的选择器：
- id
- class 伪类属性选择器
- 伪元素选择器标签选择器
- 通配符子代选择器后代选择器
权重的计算规则
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为0100
4、类，伪类和属性选择器，如： content、:hover、 [type='text']权重值为0010
5、标签选择器和伪元素选择器，如：div、p、:：before 权重值为0001
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、继承权重值为 0000
7、当权重相同后面的会覆盖前面的

三、例题

例题1

为了更好描述，如果没有行内样式，下面统一使用三位数表示权重值
例题2

<style>div > #title{color: blue;} div > h3#title.title{color: red;}[lang='en'] h3.title{color: green;}[lang='en'] #title{color: gray;}
</style>

<body><div lang="en"><h3 id="title" class="title">hello</h3></div>
</body>

A选项：标签选择器 + 子代选择器 + id选择器 = 001 + 000 + 100 = 101
B选项：标签 + 子代选择器 + id选择器 = 001 + 001 + 100 = 102
C选项：属性选择器 + 标签 + 类选择器 = 001 + 001 + 010 = 012
D选项：属性选择器 + id选择器 = 001 + 100 = 101
所以应该是B选项，红色

例题3
根据一下代码判断字体大小

<style type="text/css">#a {font-size:12px}div p{ font-size:13px }div .c{ font-size:14px }.a .b .c{ font-size:15px }#b{ font-size:16px }
</style>

<div id="a" class="a"><div id="b" class="b"><div id="c" class="c"></div></div>
</div>

A: 100
B: 001 + 001 = 002
C: 001 + 010 = 011
D: 010 + 010 + 010 = 030
E: 100

根据前面知识，分析出权重如上，乍一看，E稳了16px, 但是字体 I am here 是继承E的，所以权重为0，应该选择D

例题6：

权重相同，后面的会覆盖前面的，他们都能够选中p标签，所以两个颜色都是color: darkblue;
自己动手试试

<style>.lightblue p {color: lightblue;}.darkblue p {color: darkblue;}
</style>

<div class="lightblue"><div class="darkblue"><p>我是什么颜色？-- </p></div>
</div><div class="darkblue"><div class="lightblue"><p>我是什么颜色？-- </p></div>
</div>

例题7: 自己试试这个

<style>.main {color: blue;}span {color: green;}
</style>

<div class="main" style="color: red !important;"><span>123</span>
</div>

可能会拓展：哪些属性可以继承……

CSS选择器的优先级计算相关推荐

详解CSS选择器、优先级与匹配原理
选择器种类严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标签内写入style=""的 ...
CSS选择器的优先级的相关介绍
css选择器的优先级使用不同的选择器,选中同一个元素并且设样式的时候, 这样样式就会产生冲突,最终到底采用哪一个选择器定义的样式,由选择器的优先级(权重)决定,优先级高的优先显示优先级规则(权重值 ...
CSS选择器的优先级是怎样的？
CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器到具体的计算层面,优先级是由 A .B.C.D 的值来决定的,其中它们的值计算规则如下: A 的值等于 1 ...
【CSS笔记】CSS选择器的优先级（权重）
目录 1.1.选择器的优先级 1.2.CSS选择器权重 1.1.选择器的优先级 CSS选择器的优先级顺序如下所示: 内联样式(style) > id选择器 > class选择器 > ...
css选择器的优先级
1. 引言选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到 ...
CSS选择器及优先级总结
一.优先级不同级别在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器类选择器元素选择器通配符选择器浏览器自定义或继承 ...
CSS选择器及其优先级排序
一. CSS选择器分类 CSS选择器如下: CSS的选择器其实大类的话可以分为三类,即id选择器.class选择器.标签选择器. 用法如下: id选择器: #id名 { 属性名:属性值; } clas ...
[转]《精通css》笔记1：css选择器与优先级
本文转自:http://www.cnblogs.com/webmoon/archive/2012/12/02/2798183.html css选择器一.基础选择器 css基础选择器有标签选择器.类选 ...
关于CSS选择器的权重计算
CSS选择器的权重计算公式大概如下: 内联样式表的权值最高为 1000: ID 选择器的权值为 100 Class 类选择器.属性选择器.伪类的权值为 10 HTML 元素选择器.伪元素的权值为 1 ...

CSS选择器的优先级计算

CSS选择器的优先级计算相关推荐

最新文章

热门文章