1.class 和 id 的使用場景?
- class用于選擇同一類型的元素，id具有唯一性，一個id只能匹配一個元素
2.CSS選擇器常見的有幾種?
- 基礎選擇器
- 組合選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
3.選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
** 優先級從高到低依次是 **
- 1.左屬性后面使用！important會覆蓋頁面內任何位置定義的元素樣式
- 2.作為style屬性寫在元素標簽上的內聯樣式
- 3.id選擇器 #
- 4.類選擇器 .class
- 5.偽類選擇器 first-child
- 6.屬性選擇器 p[XXX]
- 7.標簽選擇器 p{}
- 8.通配符選擇器 *
- 9.瀏覽器選擇器
** 在復雜場景中優先級的計算是根據選擇器的優先級確定權重，同一級選擇器數量相同則比較下一級選擇器的數量;通俗點就像是皇帝納妾，先比長相氣質，再比心性性格，再比文才武略，凡是賢良淑德、德才兼備者方可進身為妃。 **
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
正確順序為：
a：link
a：visited
a:hover
a:active
原因：
1.當選擇器優先級別相同時，后定義的會覆蓋先定義的
2.當鼠標經過未訪問鏈接，同時有link和hover屬性，由于后定義的覆蓋先定義的，所以hover在后面以此類推，當鼠標經過已訪問鏈接，同時有visited和hover屬性，由于后定義的覆蓋先定義的，所以hover在link和visited后面。
5.以下選擇器分別是什么意思?
** 列出你知道的偽類選擇器 **
E:first-child 匹配元素E的第一個子元素
E:link 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active 匹配鼠標已經其上按下、還沒有釋放的E元素
E:hover 匹配鼠標懸停其上的E元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E::selection 匹配用戶當前選中的元素
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child(n) 匹配其父元素的倒數第n個子元素，第一個編號為1
E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
E:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標簽的元素
E:last-child 匹配父元素的最后一個子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:not(selector) 匹配不符合當前選擇器的任何元素** div:first-child、div:first-of-type、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 ** 匹配class名為item1的第一個元素為紅色,所以p標簽aa為紅色。
** .item1:first-of-type ** 匹配class名為item1不同類型元素的第一個元素背景色為藍色，第一種類型p標簽aa背景色為藍色；第二種類型h3標簽bb背景色為藍色，而h3標簽cc為第二種類型的第二個子元素所以背景色不變。
