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