[css] 說說CSS的優先級是如何計算的？
選擇器種類
嚴格來講，選擇器的種類可以分為三種：標簽名選擇器、類選擇器和ID選擇器，而所謂的后代選擇器和群組選擇器只不過是對前三種選擇器的擴展應用，而 在標簽內寫入 style="" 的方式，應該是CSS的一種引入方式，而不是選擇器，因為根本就沒有用到選擇器，而一般人們將上面這幾種方式結合在一起，所 以就有了5種或6種選擇器了，
三種基本的選擇器型別
語法如下：
◆標簽名選擇器，如：p{}，即直接使用HTML標簽作為選擇器，
◆類選擇器，如.polaris{}，
◆ID選擇器，如#polaris{}，
偽類，屬性選擇器特指度等同于類
偽元素特指度等同于標簽名選擇器
擴展選擇器
◆后代選擇器，如 .polaris span img{}，后代選賊器實際上是使用多個選擇器加上中間的空格來找到具體的要控制標簽，
◆群組選擇器，如 div,span,img{}，群組選擇器實際上是對CSS的一種簡化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多代碼，
特指度-優先級計算
我們需要引入一個概念——特指度（specificity），特指度表示一個css選擇器運算式的重要程度，可以通過一個公式來計算出一個數值，數越大，越重要，
這個計算叫做“I-C-E”計算公式，
I——Id；
C——Class；
E——Element；
即，針對一個css選擇器運算式，遇到一個id就往特指度數值中加100，遇到一個class就往特指度數值中加10，遇到一個element就往特指度數值中加1，
下面舉幾個css運算式的特指度計算結果，大家也自己算一算，是不是對的：
這里寫圖片描述
還有一個重點要注意：!important 優先級最高，高于上面一切，* 選擇器最低，低于一切，
后代選擇器的定位原則
在這里介紹一下對于后代選擇器，瀏覽器是如何查找元素的呢？
瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找，比如div#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有 class='red' 的 span 元素，找到后，再查找其父輩元素中是否有 p 元素，再判斷 p 的父元素中是否有 id 為 divBox 的 div 元素，如果都存在則匹配上，
瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規則和元素，
簡潔、高效的CSS
所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時候盡量進行少的查找，下面列出一些我們常見的寫CSS犯一些低效錯誤：
◆不要在ID選擇器前使用標簽名
一般寫法：div#divBox
更好寫法：#divBox
解釋： 因為ID選擇器是唯一的，加上 div 反而增加不必要的匹配，
◆不要再class選擇器前使用標簽名
一般寫法：span.red
更好寫法：.red
解釋：同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css檔案中定義如下：
p.red{color:red;}
span.red{color:#ff00ff}
如果是這樣定義的就不要去掉，去掉后就會混淆，不過建議最好不要這樣寫，
◆盡量少使用層級關系
一般寫法：#divBox p .red{color:red;}
更好寫法：.red{..}
◆使用class代替層級關系
一般寫法：#divBox ul li a{display:block;}
更好寫法：.block{display:block;}
個人簡介
我是歌謠，歡迎和大家一起交流前后端知識，放棄很容易，
但堅持一定很酷，歡迎大家一起討論
主目錄
與歌謠一起通關前端面試題
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/263462.html
標籤：其他
下一篇：vue組件通信：父與子、子與父