參考文章：https://www.cnblogs.com/zxjwlh/p/6213239.html
前端的選擇器
| 選擇器 | 用法 |
|---|---|
| id選擇器 | idName |
| 類選擇 | .className |
| 標籤選擇器 | p，span |
| *通配符選擇器 | 配合其他選擇器來使用 |
| 並集選擇器， | div,p,body,div,ul,li |
| 後代選擇器空格 | div span(div下面所有span) |
| 子代選擇器> | h1>strong |
| 緊鄰選擇器+ | div+p(div緊挨着的p) |
| 僞類選擇器 | link、visited、active、hover、after |
| 屬性選擇器 | ^ $ *三種，分別對應開始、結尾、包含 |
css選擇器的優先級：
- 在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式.!important爲開發者提供了一個增加樣式權重的方法，讓瀏覽器首選執行這個語句
#divName{
background-color:#eee !important;
}- 作爲style屬性寫在元素內的樣式，內聯樣式，如: style=””,權值爲1000。
<span style="color:#eee"></span>- id選擇器,如：#div，權值爲100
- 類選擇器,僞類和屬性選擇器，如.className，權值爲10
- 標籤選擇器 權值爲1
- 通配符選擇器 權值爲0
- 瀏覽器自定義或繼承 無權值
注意：通用選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，所以他們的權值都爲0。
總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
CSS三大特性—— 繼承、 優先級和層疊。
- 繼承：即子類元素繼承父類的樣式;
- 優先級：是指不同類別樣式的權重比較;
- 層疊：是說當數量相同時，通過層疊(後者覆蓋前者)的樣式。