CSS优先级
当多个CSS规则针对相同的HTML元素并且这些CSS规则设置了一些相同的CSS属性时，最终将哪些样式应用于HTML元素？换句话说，哪个CSS规则优先？
CSS优先级是Web设计人员和开发人员可以花很长时间解决的问题。理解CSS优先级无疑会使战斗更加轻松。
CSS优先示例
在进入CSS优先规则之前，让我们看一个示例：
<head>
<style>
body {
font-family: Arial;
font-size: 14px;
}
p {
font-size: 16px;
}
.logo {
font-family: Helvetica;
font-size : 20px;
}
</style>
</head>
<body>
<div id="header">
<span class="logo">Super Co</span>
</div>
<div id="body">
<p>
This is the body of my page
</p>
</div>
</body>
此示例包含三个CSS规则。所有这三个CSS规则都设置了CSS属性font-size，其中两个CSS规则设置了CSS属性font-family。 body元素的CSS规则由div，span和p元素继承。另外，span元素具有一个CSS规则，该CSS规则由其CSS类(.logo)定位，而p元素具有针对所有p元素的CSS规则。哪些样式最终应用于" span"和" p"元素？
CSS优先规则
当浏览器需要确定要应用于给定HTML元素的样式时，它将使用一组CSS优先规则。根据这些规则，浏览器可以确定要应用的样式。规则是：
- CSS属性后的
！important。 - CSS规则选择器的特异性。
- 声明顺序。
我将在以下各节中解释这些规则的含义。
请注意，CSS优先级发生在CSS属性级别。因此，如果两个CSS规则针对同一HTML元素，并且第一个CSS规则优先于第二个CSS规则，则第一个CSS规则中指定的所有CSS属性优先于第二个规则中声明的CSS属性。但是，如果第二条CSS规则包含在第一条CSS规则中未指定的CSS属性，则这些属性仍然适用。 CSS规则组合在一起，不会互相覆盖。
!important
如果我们需要某个CSS属性优先于为相同HTML元素设置相同CSS属性的所有其他CSS规则，则可以在声明CSS属性后添加指令"!important"。 "！important"指令具有所有优先级因素中最高的优先级。这是一个！important的例子：
<style>
div {
font-family: Arial;
font-size: 16px !important;
}
.specialText {
font-size: 18px;
}
</style>
<div class="specialText">
This is special text.
</div>
这个例子包含两个CSS规则，它们都以div元素为目标。
通常，带有CSS类选择器的CSS规则比带有元素选择器的CSS规则具有更高的特异性，因此通常第二条CSS规则(.specialText {...})会优先于第一条CSS规则(div { ...})。这就是说，.specialText规则将div元素的font-size设置为18px。
但是，由于div {...}CSS规则在font-sizeCSS属性之后包含！important指令，因此该CSS属性声明优先于所有其他声明，而没有！important指令相同的HTML元素。
CSS规则选择器的特异性
有时，浏览器无法根据！important指令确定CSS规则或者属性优先级。这是因为没有CSS属性声明包含！important指令，或者是因为多个CSS属性声明都包含了同一CSS属性的！important指令。在这些情况下，浏览器将使用CSS规则选择器的特殊性来确定哪些CSS属性优先。
CSS规则的特异性取决于其选择器。 CSS选择器越具体，拥有选择器的CSS规则中CSS属性声明的优先级越高。
一般而言，CSS选择器越具体地(唯一地)针对HTML元素，其特异性就越高。
不同的CSS选择器类型具有不同的特异性。特定性是指CSS选择器针对元素所选择的特定程度。这是CSS选择器特异性的列表：
| CSS选择器 | 描述 |
|---|---|
| 继承的样式 | 所有选择器的最低特定性-因为继承的样式以元素的父对象为目标，而不是HTML元素本身。 |
| * | 所有直接定位选择器的最低特异性 |
| element | 比通用选择器和继承的样式具有更高的特异性。 |
| 属性 | 比元素选择器更高的特异性 |
| class | 比属性，元素和通用选择器更高的特异性。 |
| ID | 比类选择器更高的特异性。 |
| 组合选择器 | 获得组合选择器的特异性。 |
| CSS属性直接设置在元素上，位于style属性内。 |
仅凭此列表很难理解特异性，因此让我举一些例子。首先，请看下面的HTML + CSS示例：
<body>
<style>
body { font-size: 10px; }
div { font-size: 11px; }
[myattr] { font-size: 12px; }
.aText { font-size: 13px; }
#myId { font-size: 14px; }
</style>
<div > Text 1 </div>
<div myattr > Text 2 </div>
<div myattr class="aText" > Text 3 </div>
<div myattr class="aText" id="myId" > Text 4 </div>
</body>
本示例包含5条不同的CSS规则，它们均以示例中的一个或者多个div元素为目标。
第一条CSS规则的目标是body元素。在此CSS规则中为body元素设置的样式由div元素继承。此CSS规则中设置的CSS属性对于div元素的优先级最低，因为它们不是直接在div元素上而是在其父元素body上设置的。
第二条CSS规则以div元素为目标。该CSS规则更特定于div元素，该样式是从body元素继承的样式。
第三个CSS规则针对所有HTML元素，并带有名为" myattr"的属性。这比所有div元素都更具体。因此，具有myattr属性的div元素将应用此CSS规则。如果我们在属性选择器上设置了一个属性值，则该属性值将更加具体。
第四条CSS规则以CSS类名为aText的所有HTML元素为目标。 CSS类选择器比div元素选择器和[myattr]属性选择器更具体，因此带有CSS类aText的div元素将应用此CSS规则。
第五条CSS规则以ID为" myId"的HTML元素为目标。 ID选择器比元素选择器，属性选择器和类选择器更具体，因此ID为myId的div元素将应用此CSS规则。
到目前为止，我们应该了解不同选择器的特殊性。但是优先权仍然会变得更加复杂。当我们组合CSS选择器类型时，它们的特殊性也会被组合。例如，查看以下CSS规则：
div { }
div[myattr]
div[myattr].aText { }
第一条CSS规则只是标准元素选择器。这里没有新内容。但是，第二个选择器是元素选择器和属性选择器的组合。该选择器将比属性选择器本身更具体。第三个CSS规则结合了元素选择器，属性选择器和类选择器。这个CSS选择器比类选择器本身更具体。
一旦开始在CSS规则中组合CSS选择器类型，我们将需要更仔细地检查这些选择器的优先级，或者确保它们在目标元素中没有重叠，以实现所需的样式。
