一、class 和 id 的使用場景?
- id匹配特定的id，定位頁面某一特定的元素
- class 類選擇器，匹配class包含（不是等于）特定的元素，定位某一類的元素
二、 CSS選擇器常見的幾種類型
1、基礎選擇器
*匹配頁面任何元素
id匹配特定的id，定位頁面某一特定的元素
class 類選擇器，匹配class包含（不是等于）特定的元素，定位某一類的元素
2、組合選擇器
E,F 多元素選擇器，同時選擇E F
E F 后代選擇器
E>F 子元素選擇器，匹配E元素所有直接子元素
E+F 直接相鄰選擇器
E~F 普通相信選擇器，E所有的鄰居
3、屬性選擇器
4、偽類選擇器
一個元素處于另外一種狀態
a的偽類選擇器順序：1 a{} 2 a:visited{}3 a:hover{} 4 a:active{}
5、偽元素選擇器
三、選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
選擇器優先級：1、在屬性后面使用！import，覆蓋所有的樣式
2、作為style屬性，寫在元素標簽上的內聯樣式
3、id選擇器
4、類選擇器
5、偽類選擇器
6、屬性選擇器
7、標簽選擇器
8、通配符選擇器
9、瀏覽器自定義
復雜場景優先級：當按照以上優先級出現沖突時，則按照選擇符對應的數相加后得到的四位數，從左到右進行比較，大的優先級越高
四個級別：行內選擇符、id選擇器、類選擇器、元素選擇器對應的初始四位數 0、0、0、0，根據個數來算，從左到右進行比較，大的優先級越高，1,0,0,0 > 0,99,99,99
四、a:link, a:hover, a:active, a:visited 的順序
：1 a：link 2 a:visited{}3 a:hover{} 4 a:active{}
由于會出現相互覆蓋的情況，所以要按照這個順序執行
五、
#header{} // 為id等于header的設置樣式
.header{} // 為類是header的一類元素設置樣式
.header .logo{} // 為class是header 子元素中class是 logo的的元素設置樣式
.header.mobile{} clas同時有header 和mobile的元素設置元素設置樣式
.header p, .header h3{ } // class 為header后代中，p元素和h3元素設置樣式
#header .nav>li{} // id 是header 的子元素中id為nav的所有直接子元素li 設置樣式
#header a:hover{} //id 為header的子元素中，a元素處于懸浮狀態時候的樣式
#header .logo~p{} // id 為header的子元素中，class是logo的所有相鄰的p元素設置樣式
#header input[type="text"]{} // id 是header的子元素中，input的元素type是text的所有元素設置樣式
六 列出你知道的偽類選擇器
偽類選擇器:
| 標簽 | 描述 |
|---|---|
| a:link | 匹配所有未被點擊的鏈接 |
| a:visited | 匹配所有已經被點擊的鏈接 |
| a:hover | 匹配a鏈接處于懸浮狀態的元素 |
| E:focus | 匹配當前處于焦點的元素 |
| E:disabled | 匹配被禁用的元素 |
| E:checked | 匹配被選中的radio或者checkbox元素 |
| E:selection | 匹配用戶當前選中的元素 |
| E:last-child | 匹配父元素的最后一個子元素 |
| E:first-of-type | 匹配父元素下使用同種標簽的第一個子元素 |
| E:last-of-type | 匹配父元素下使用同種標簽的最后一個子元素， |
七 div:first-child和div:first-of-type的作用和區別
div:first-child ： div第一個子元素
div:first-of-type：父元素下的同種類型的第一個元素
