今天進行了一個前端的筆試，問到了樣式優先級的選擇問題，說真的，我只能憑感覺判斷一些優先級，到了複雜情況還真不一定能判斷出來，所以來總結一下。
一般情況
一般結論就是：
通用選擇器(也就是*)<元素（類型）選擇器(比如p標籤)<類選擇器(.class{…})<屬性選擇器([attribute=value]之類的)<僞類(:hover)<ID 選擇器(#id{…})<內聯樣式(也就是定義在標籤裏面的style)
總的來說就是
外部樣式<內部樣式 <內聯樣式
有個例外的情況，就是如果外部樣式放在內部樣式的後面，則外部樣式將覆蓋內部樣式。
除開以上，還有一個特別需要關注的就是**!important**，只要他出現，那麼一定以他優先
權重表
權重分爲四個等級
-
第一等：內聯樣式，權重1000，即標籤內的style屬性設置的樣式
-
第二等：ID選擇器，權重100，例如#id{…}
-
第三等：類選擇器，僞類選擇器，屬性選擇器，權重10，例如.class{…}、:hover{…}、[arrtibute=value]
-
第四等：標籤選擇器，僞元素選擇器，權重1，例如div{…}、::after{…}
根據樣式根據以上規則，按照選擇器累加計算權重，例如
#my-id .my-class div p{...}
對於p標籤的來說，這個樣式的權重就是100(#my-id)+10(.my-class)+1(標籤選擇器)+1(標籤選擇器)=112。權值越大，那麼優先級越高。
對於同權重的樣式來說，需應用靠後定義的樣式，這裏靠後是指在樣式文件或者<style>標籤中定義時位置靠後的元素，同時遵循“元素上的style” > “文件頭上的style元素” >“外部樣式文件”的優先級。