[05] css优先级

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;}

  

 

posted on 2017-12-19 19:45  yezixuan  阅读(250)  评论(0编辑  收藏  举报