你必須懂的css樣式權重和優先級

問題：選擇器的權重與優先級有什么關系？

一、什么是權重？

先來看下面這樣兩段代碼，大家分析class="c"的標簽內文字的顏色是？

<style>
.class-a .b .c {
    color: red;
}
.class-a .c {
    color: blue;
}
</style>
<div class="class-a" id="id-a">
    <div class="b">
        <div class="c">文字</div>
    </div>
</div>

在這里插入圖片描述

結果：是紅色
（假如我剛接觸css，我會理解為，選擇器越長，樣式的優先級越高，所以上面的生效了）

<style>
.class-a .b .c {
    color: red;
}
#id-a .c {
    color: blue;
}
</style>
<div class="class-a" id="id-a">
    <div class="b">
        <div class="c">我是文字</div>
    </div>
</div>

在這里插入圖片描述

結果：是藍色，
（我推翻了第一個結論，我知道id選擇器優先級更高）

看了這兩個示例，我們意識到樣式生效一定是有優先級的，并不全是由代碼層面的先后順序決定的，那么這種優先級又是誰來決定的呢？

小結一下：

瀏覽器通過優先級來判斷哪些屬性值與一個元素最為相關，從而在該元素上應用這些屬性值，
優先級是由匹配的選擇器中每一種選擇器型別的 數值 決定的，
當同一個元素有多個宣告的時候，優先級才會有意義，因為每一個直接作用于元素的 CSS 規則總是會接管/覆寫（take over）該元素從祖先元素繼承而來的規則，
當優先級與多個 CSS 宣告中任意一個宣告的優先級相等的時候，CSS 中最后的那個宣告將會被應用到元素上，

二、常見選擇器的權重

在這里插入圖片描述

行內樣式+1000
d選擇器+100
屬性選擇器、class或者偽類+10
元素選擇器，或者偽元素+1
通配符+0，

每一組選擇器在判斷優先級的時，是相加的關系，舉例：

#id .class span{
// 權重是 100+10+1 = 111
}

這樣再來回顧第一小節的例子，優先級一目了然，哪個樣式會生效就清楚了，

!important - 例外規則

當在一個樣式宣告中使用一個 !important 規則時，此宣告將覆寫任何其他宣告，雖然，從技術上講，!important 與優先級無關，但它與最終的結果直接相關，

<style>
.class-a .b .c {
    color: red;
}
.class-a .c {
    color: blue;!important
}
</style>
<div class="class-a" id="id-a">
    <div class="b">
    	<!--此時文字顏色是藍色-->
        <div class="c">文字</div>
    </div>
</div>

上面的例子優先級沒變，但結果被important影響了，

使用 !important 是一個壞習慣，應該盡量避免，因為這破壞了樣式表中的固有的級聯規則使得除錯找bug變得更加困難了，

再來看這樣的例子：

<style>
.class-a .b .c {
    color: red!important;
}
.class-a .c {
    color: blue!important;
}
</style>
<div class="class-a" id="id-a">
    <div class="b">
    	<!--此時文字顏色是紅色-->
        <div class="c">文字</div>
    </div>
</div>

當兩條相互沖突的帶有 !important 規則的宣告被應用到相同的元素上時，擁有更大優先級的宣告將會被采用，

小結一下：

每一組選擇器在判斷優先級的時，是相加的關系
一定要優先考慮使用樣式規則的優先級來解決問題而不是 !important
只有在需要覆寫全站或外部 CSS 的特定頁面中使用 !important
永遠不要在你的插件中使用 !important
永遠不要在全站范圍的 CSS 代碼中使用 !important

三、有關優先級有意思的細節

3.1 為目標元素直接添加樣式，永遠比繼承樣式的優先級高

#parent {
  color: green;
}

h1 {
  color: purple;
}

當它應用在下面的HTML時：

<html>
  <body id="parent">
    <h1>Here is a title!</h1>
  </body>
</html>

在這里插入圖片描述

會顯示紫色！

3.2 外聯樣式和行內樣式存在區別

文章開始我們提過，樣式生效不取決于代碼層面的順序，我們來看這樣的例子

/* styles.css */
#box{
	background-color: yellow;
}
#div{
	width: 500px;
	height: 500px;
	background-color: pink;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>先引入后行內</title>
		<link rel='stylesheet' href='css/styles.css'>
		<style>
			#div{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<!-- 行內樣式生效 -->
		<div id='div'></div>
	</body>
</html>