class 和 id 的使用場景?
class 用于具有相同樣式特征的一組元素上。
id 是元素的獨一無二的名稱。
CSS選擇器常見的有幾種?
基本選擇器
組合選擇器
屬性選擇器：
偽類選擇器
偽元素選擇器
選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
依次往下優先級降低：
！important
style內聯樣式
id選擇器
類選擇器
偽類選擇器
屬性選擇器
標簽選擇器
通配符選擇器
瀏覽器自定義
復雜場景計算方式是：
為各類元素設立優先級，按照以下規則：
行內樣式-a
ID選擇器-b
類、屬性選擇器、偽類選擇器 -c
標簽選擇器、偽類選擇器-d
首先比較a的大小，a值大的優先級高；如果a值相等，再比較b，b值大的優先級高；依次類推，一直到d.
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
a:link
a:visited
a:hover
a:active
在CSS中，如果對同樣的元素有針對不同條件的定義，一般講最一般的條件放在最上面，最特殊的條件放在最下面。
因為，瀏覽器在顯示元素時，會從特殊到一般、逐級向上驗證條件。
header 是ID選擇器
.header 是類選擇器
.header .logo 后代選擇器，中間有空格，只選擇類header下面的子元素logo
.header.mobile 中間沒有風格符，.本身充當分隔符
.header p,.header h3 組合選擇器，選擇類.header 下的子元素p和類.header 下的子元素h3
header .nav>li id為header元素下的子元素nav下的直接子元素li
header a:hover id為header元素下的偽類子元素a:hover
選擇id為header元素下的logo和所有p元素
選擇id為header元素下的input元素中屬性type="text"的元素
列出你知道的偽類選擇器
a:visited
a:active
a:link
a:hover
a:focus
a:disabled
a:checked
a:first-child
a:enabled
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 （注意空格的作用）
div:first-child 匹配div元素父元素中的第一個子元素
div:first-of-type 匹配div元素父容器下的同種類型中的第一個
.item1:first-child 匹配item1元素父容器下的類為item1的第一個子元素的顏色變為紅色，所以aa顯示為紅色
.item1:first-of-type 匹配item1元素父容器下類為item1的同類標簽的第一個，所以是aa,bb的背景色變藍
