最近在牛客網上刷題遇到過各類選擇器優先順序的比較問題，經查閱，現總結如下：

總體來說：內聯樣式 > id>class=屬性選擇器=偽類選擇器=偽元素選擇器>標籤，大致分為四個等級：

一等：代表內聯樣式，如: style=””，權值為1000；

二等：代表ID選擇器，如：#content，權值為100；

三等：代表類，偽類和屬性選擇器，如.content，權值為10；

四等：代表型別選擇器和偽元素選擇器，如div p，權值為1；

下圖是一些計算例項：

注意：通用選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，所以他們的權值都為0。

我們再來看一個具體的例子：假如有以下樣式規則，判斷HTML程式碼中的兩個標題是什麼顏色？

#content div#main-content h2{
	color:red;
}

#content #main-content>h2{
	color:blue
}
body #content div[id="main-content"] h2{
	color:green;
}

#main-content div.paragraph h2{
	color:orange;
}
#main-content [class="paragraph"] h2{
	color:yellow;
}
div#main-content div.paragraph h2.first{
	color:pink;
}
 

以下是HTML程式碼：

<div id="content">
	<div id="main-content">
		<h2>CSS簡介</h2>
		<p>CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級聯樣式表”）是一組格式設定規則，用於控制Web頁面的外觀。</p>
		<div class="paragraph">
			<h2 class="first">使用CSS佈局的優點</h2>
			<p>1、表現和內容相分離 2、提高頁面瀏覽速度 3、易於維護和改版 4、使用CSS佈局更符合現在的W3C標準.</p>
		</div>
	</div>
</div>
 

答案是：兩個標題都是紅色的！

讓我們來一起算算六個樣式規則各自的特殊性的值：

• 第一個特殊性的值=2*100+2*1=202
• 第二個特殊性的值=2*100+1=201
• 第三個特殊性的值=1*100+1*10+2*1=112
• 第四個特殊性的值=1*100+1*10+1*1=111
• 第五個特殊性的值=1*100+2*10+3*1=123

清楚了吧，第一個樣式規則以其202的高分一舉奪得了本次樣式選擇器特殊性大賽的冠軍，後面一些規則雖然看起來好像更復雜，但特殊性並不是拼誰的選擇器表示式寫得更長，ID選擇器才是王道！

這裡使用圖文的形式，講解各個選擇器的權重及優先順序規則的使用，直觀且容易理解，希望對大家有所幫助！

參考：http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php