CSS選擇器的類型：

標簽選擇器

類選擇器

ID選擇器

全局選擇器

群組選擇器

后代選擇器

---

1.標簽選擇器： 以HTML的標簽作為選擇器，凡是選擇了一個標簽，那么所有這個標簽的內容都是用了css樣式 用法很簡單，直接在style中 標簽{}即可聲明 <style>p,h1,a{font-size:50px;} </style>

---

2.類選擇器： 標簽選擇器無法實現某一類標簽里的標簽css樣式特殊化化 通過個標簽命名類分類，例如<p class="pclass"> </p>來將一個p便簽命名為pclass，再在style中以 .（點）pclass（類名）來聲明 .pclass{color:red;} 可以給同一類的不同標簽設置不同的樣式，只需要在.classname前加入標簽名，例如p.classname{} 一個標簽可以引用多個類選擇器創建的樣式，用空格隔開，例如 <p class=“one two three”></p>

---

3.ID選擇器： 用法與類選擇器類似，在開始標簽中添加標簽的id，例 <p id=“one”>ID選擇器</P> 在style中用#id聲明，例 <style>#one{color:red;} </style> ps：一個標簽只能有一個id

---

4.群組選擇器： 既一個聲明有多個選擇器，他們以逗號隔開，例 .red,#one,p{font-size:30px;}

---

5.全局選擇器： 顧名思義全局選擇器就是一個聲明選擇所有的標簽，用*表示所有的標簽,又叫通配符選擇器 *{color:yellow;}

?

---

? 6.后代選擇器： 父子節點以空格隔開 div p b{font-size:100px;} /* div標簽里的p標簽里的b標簽*/

?

---

選擇器的優先級與疊加： ①??在沖突的情況下（同一種選擇器） 用同一種css屬性，例如都是color修飾，采取就近原則，取最下面那個。 h1{color:red;} h1{color:purple;} 例如上面這個，最后h1標簽是字體是紫色。? 用不同一種css屬性，會將效果疊加在一起 h1{color:red;} h1{font-size:50px;} h1{color:red;font-size:50px} 這兩個效果是一樣的 ②在非沖突的情況下（不同選擇器） 用同一個css屬性修飾同一個標簽采取一定的優先級 內部樣式中 id選擇器 > 類選擇器

---

ps：當聲明了多個相同屬性的class（相同類型）時，一個標簽選擇多個class，最后的結果為最后聲明的class（與開始標簽中的class的順序無關） .classred{color:red;} .classblue{color:blue;} 先有如上兩個內部class <p class=“classred classblue”>test</p> <p class=“classblue classred”>test</p> 這兩個效果是一樣的，都test都顯示為藍色，因為.classblue{color:blue;}是最后聲明的?????

---

當涉及到后代選擇器，有多個css選擇同一個類標簽時，優先級的考慮復雜了些許，標簽使用哪個css可以通過計算權值來決定優先 在同一個樣式表中（同一個style或css文件）： 1.權值相同：就近原則 2.權值不同：選取權值最高的使用 選擇器的權值：

• 標簽選擇器：1
• 類選擇器和偽類：10
• ID選擇器：100
• 通配符選擇器：0
• 行內樣式：1000

權值計算的規則：不同種選擇器數量x權值之和 例如： #one div.color h2{…} ID：1x100 標簽：2 x1 類：10 總權值：100 2 10=112 重要性： 涉及到優先級有一個特殊的語句，!important，在css中寫入后這個最優先。注意!important要寫在;分號前 p{color:blue !important;} #one{color:red;}<p>important</p>

?

因為標簽選擇器使用了!important，所以這里顯示藍色 p{color:blue !important;} #one{color:red !important;}<p>important</p>

?

這時候就顯示紅色。當大家都有!important時，就按照老方法，無視!important就好了 CSS優先級總結

• !important聲明最高
• CSS使用方法的優先級

行內樣式 > 內部樣式 > 外部樣式 PS：link鏈入外部樣式和style內部樣式的優先級，取決于先后順序

• 樣式表中優先級

id選擇器 > class選擇器 > 標簽選擇器 > 通配符*

權值相同	權值不同
就近原則	使用權值高的

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的CSS学习笔记3：选择器及优先级的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。