1.优先级计算规则(特殊性)
在css中,有不同的方式编写css,如果想给同一个标签设置样式,选择器的写法有很多种,那么当多个样式都应用于同一个标签,标签优先选择哪个样式呢?按照以下规则:
现有 0,0,0,0 四个位置
第一个0位置: 表示内联样式(标签上的style属性)1,0,0,0
第二个0位置: 表示id选择器 0,1,0,0
第三个0位置: 表示类选择器,属性选择器或伪类 0,0,1,0
第四个0位置: 表示标签和伪元素 0,0,0,1
1.1实例
一个样式的位置优先级最终由选择器计算出来的总分最高的匹配,例如下面的实例:
// 0,0,0,1 h1 { color: red; } //0,0,0,2 p h1 { color: blue; } //0,0,1,0 .h1Class { font-size: 12px; } //0,0,1,0 *.h1Class { font-size: 20px; } //0,0,2,2 p.h1Class em.dark { color: maroon; } //0,1,0,0 #pId { color: yellow } // 0,1,1,1 div#h1Class *[href] { color: silver; }
// 0.0.1.7 (这里的id属性选择器只贡献了0.0.1.0,和id选择器不一样)
html > body table tr[id='totals'] td url > li {
color: maroon;
}
当多个选择器样式不冲突的时候,会合并样式应用到标签。
1.2 重要性
当某个样式非常重要,可以使用!important标记。大于上面计算方式的一切样式.下面的样式颜色为蓝色
<h1 style="color:red;">hello</h1> //css h1 { color: blue!important; }
2.样式层叠后的优先级
2.1 用户代理三种css来源
我们先弄清楚创作人员,读者和用户代理三种css来源。
创作人员(author's+style):如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式。
用户代理样式(agent's+style),用户代理也就是我们通常所说的浏览器(IE、Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一个纯粹由html代码构成的网页里,我们会发现超链接会带有一个蓝色的前景色,这其实就用户代理样式,借用一些插件我们可以方便的查看这些默认样式(比如Firefox中的Web+developer)
读者样式(reader's+style):所谓读者自然就是浏览网页的用户,有些时候这些用户里可能会有人不满意网页的配色,或者字体大小,这时候他们就是通过浏览器提供的接口为网站添加读者样式。
2.2 层叠优先级判断
1.找到应用于同一个元素的所有css规则
2.按照权重排序, 标志!important最高,没有!important的情况,创作人员> 读者样式>用户代理。下面是权重由高到低
a.读者的重要声明(!important)
b.创作者的重要声明(!important)
c.创作者的正常声明
d.读者的正常声明
e.用户代理声明
3.当上面的计算方式结果一样,按照特殊性(特殊性的优先计算规则)排序
<p id="bright">hello,world</p> //权重排序:都是创作者,但是特殊性0,1,0,1 p#bright { color: silver; } //权重排序:都是创作者,但是特殊性0,0,0,1 p { color: black; }
4.按出现顺序,越在后面的,权重越大
//例1: 两个规则的权重,来源和特殊性完全相同,那么谁在后面则胜出 //失败 h1 { color: silver; } //胜出 h1 { color: blue; }
// 例2: a链接的伪元素选择器方式。权重,来源和特殊性都是一样的。特殊性为0,0,1,0,因此在点击‘未访问’的链接时,匹配:link,:hover,:active,而最后一个胜出 :link { color: blue;} :visited { color: purple;} :focus: { color: black;} :hover { color: red;} :active { color: orange} //按照这种顺序不会显示:hover或:active的样式。因为:link和:visited出现在后面。链接要么是已访问,要么是未访问,所以:link :visted会覆盖:hover的规则 :active { color: orange} :focus: { color: black;} :hover { color: red;} :link { color: blue;} :visited { color: purple;}