什么是特异性？
如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。
将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。
通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！
这种特异性是 CSS 规则不适用于某些元素的常见原因，尽管您可能会认为应该适用。
特异性层次
每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：
-
行内样式 - 行内（内联--
style）样式直接附加到要设置样式的元素。实例：<h1 style="color: #ffffff;">。 -
ID -
ID是页面元素的唯一标识符，例如#navbar。 -
类、属性和伪类 - 此类别包括
.classes、[attributes]和伪类，例如：:hover、:focus 等。 -
元素和伪元素 - 此类别包括
元素名称和伪元素，比如 h1、div、:before 和 :after。
如何计算特异性？
请您牢记计算特异性的方法！
从 0 开始，为 style 属性添加 1000，为每个 ID 添加 100，为每个属性、类或伪类添加 10，为每个元素名称或伪元素添加 1。
!important优先级最高，但不是选择器
特异性规则 1：
在特异性相同的情况下：最新的规则很重要 - 如果将同一规则两次写入外部样式表，那么样式表中后面的规将更靠近要设置样式的元素，因此会被应用：
h1 {background-color: yellow;}
h1 {background-color: red;}
后一条规则始终适用。
特异性规则 2：
ID 选择器比属性选择器拥有更高的特异性 - 请看以下三行代码：
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
第一条规则比其他两条更具体，因此将被应用。
特异性规则 3：
上下文选择器比单一元素选择器更具体 - 嵌入式样式表更靠近要设置样式的元素。所以在以下情况下：
来自外部 CSS 文件：
#content h1 {background-color: red;}
在 HTML 文件中：
<style>
#content h1 {
background-color: yellow;
}
</style>
将适用后一条规则。
特异性规则 4：
类选择器会击败任意数量的元素选择器 - 类选择器（诸如 .intro 会击败 h1、p、div 等）：
.intro {background-color: yellow;}
h1 {background-color: red;}
此外，通用选择器以及被继承的值拥有 0 - * 的特异性，body * 及类似拥有 0 的特异性。被继承的值的特异性也为 0。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<!--
css样式遵循的规律:
1. 相同类型的选择器遵循: a.就近原则 b.叠加原则
2. 不同类型的选择器遵循:
a> 选择器的针对性越强，它的优先级就越高
b> 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
c>
important > 内联 > id > 类| 伪类 | 属性选择 | 伪元素 > 标签 > 通配符 > 继承
d>选择器的权值
通配选择符：0
标签：1
类：10
属性：10
伪类：10
伪元素：10
id:100
important:1000
-->
<style>
/*复合选择器*/
div.test1{/*权值:10+1*/
color: darkolivegreen;
}
div#main{/*权值:100+1*/
color: chartreuse;
}
/*id选择器*/
#main{/*权值:100*/
color:deeppink;
}
#second{
color: palegoldenrod;
}
/*类选择器*/
.test1{/*权值:10*/
color: blue;
}
.test2{/*权值:10*/
color: yellow;
}
/*标签选择器*/
div{/*权值:1*/
color: red !important;
}
/*
通配符:
1. 优先级别非常低
2. 性能比较差
*/
*{ /*权值:0*/
font-size: 30px ;
}
</style>
</head>
<body>
<div id="main" class="test1 test2" style="color: blue;">我是用来测试优先级别的</div>
</body>
</html>
