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