雖然學前端最剛開始就是html+css，一直因為這些看起來太簡單就沒有什么總結，不過看似很簡單的東西，研究起來也深不可測，問起來js可能回答的頭頭是道，css這么簡單的東西，其中一個優先級的問題就能難道大片人，知道有哪些css選擇器，大部分人都能回答出常用常見的幾個id選擇器，類選擇器，標簽選擇器，偽類選擇器等，但應該大部分人都答不全。所以本篇打算總結一下css的選擇器和其優先級。
優先級是如何計算的？
1. 優先級就是分配給指定的css聲明一個權重。
2. 當優先級相等的時候，最后的那個聲明將會被應用到元素上
<p>111</p> <!--紅色--> /* 就像這樣，優先級相同，最終顯示的顏色是紅色，應用到元素上的是最后一個 */ p{color:blue;} p{color:red;}
3. 當同一個元素有多個聲明時，優先級才有意義。優先級高的會覆蓋優先級低的樣式。
css有哪些選擇器？
下面優先級依次遞減
除此之外，優先級：!important > 內聯樣式 > 外部樣式
通過一個例子感受下，不常用的幾個選擇符（+、>、~），遵循上面的原則
<!DOCTYPE html>
<html>
<head>
<title>css優先級</title>
<style type="text/css">
div>p{color: blue;}/*子元素選擇器--選擇class為myclass下的所有子元素p元素*/
h1+p{color: red;}/*兄弟元素選擇器--選擇和h1的所有兄弟元素p元素*/
.myclass h1~p{color: yellow;}/*兄弟元素選擇器--選擇h1后面所有的p元素*/
</style>
</head>
<body>
<div class="myclass">
<p>1111</p><!-- 藍色 -->
<h1>1111</h1>
<p>1111</p><!-- 紅色 -->
<p>1111</p><!-- 藍色 -->
<div>
<p>1111</p><!-- 藍色 -->
<h1>1111</h1>
<p>1111</p><!-- 紅色 -->
<p>1111</p><!-- 藍色 -->
</div>
<div class="myclass">
<p>1111</p><!-- 藍色 -->
<h1>1111</h1>
<p>1111</p><!-- 黃色 -->
<p>1111</p><!-- 黃色 -->
</div>
</div>
</body>
</html>
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity