1.class 和 id 的使用場景?
- 兩者都能選取DOM節點并給DOM節點添加樣式，但是W3C標準里規定頁面中只能存在的ID選擇器數量<=1,所以在操作DOM元素添加樣式時盡量使用class選擇器。
- ID選擇器由于它的唯一性，通常都是配合JavaScript使用。
2.CSS選擇器常見的有幾種?
- 基本選擇器
- '*' 通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用）
-
id id選擇器，匹配特定id的元素
- .class 類選擇器，匹配class包含(不是等于)特定類的元素
- element 標簽選擇器
- 組合選擇器
- E,F 多元素選擇器，用,分隔，同時匹配元素E或元素F
- E F 后代選擇器，用空格分隔，匹配E元素所有的后代（不* 只是子元素、子元素向下遞歸）元素F
- E>F 子元素選擇器，用>分隔，匹配E元素的所有直接子元素
- E+F 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F
- E~F 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）
- .class1.class2 id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素
- element#id id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素
- 屬性選擇器
- E[attr] 匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
- E[attr = value] 匹配屬性attr值為value的元素，div[id=test],匹配id=test的div
- E[attr ~= value] 匹配所有屬性attr具有多個空格分隔、其中一個值等于value的元素
- E[attr ^= value] 匹配屬性attr的值以value開頭的元素
- E[attr $= value] 匹配屬性attr的值以value結尾的元素
- E[attr *= value] 匹配屬性attr的值包含value的元素
- 偽類選擇器
- E:first-child 匹配作為長子（第一個子女）的元素E
- E:link 匹配所有未被點擊的鏈接
- E:visited 匹配所有已被點擊的鏈接
- E:active 匹配鼠標已經其上按下、還沒有釋放的E元素
- E:hover 匹配鼠標懸停其上的E元素
- E:focus 匹配獲得當前焦點的E元素
- E:lang(c) 匹配lang屬性等于c的E元素
- E:enabled 匹配表單中可用的元素
- E:disabled 匹配表單中禁用的元素
- E:checked 匹配表單中被選中的radio或checkbox元素
- E::selection 匹配用戶當前選中的元素
- E:root 匹配文檔的根元素，對于HTML文檔，就是HTML元素
- 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:empty 匹配一個不包含任何子元素的元素，文本節點也被看作子元素
- E:not(selector) 匹配不符合當前選擇器的任何元素
- N的取值(當使用n作為系數時，可以為0，不是系數時只能從1開始)
1，2，3，4，5
2n+1, 2n, 4n-1
odd, even - 偽元素選擇器
- E::first-line 匹配E元素內容的第一行
- E::first-letter 匹配E元素內容的第一個字母
- E::before 在E元素之前插入生成的內容
- E::after 在E元素之后插入生成的內容
3.選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
- 在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
- 作為style屬性寫在元素標簽上的內聯樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
a標簽偽元素順序.png
- 根據瀏覽器從上到下執行代碼順序決定
- 如果將a:visited放在最后一位，則表示只要該鏈接被點擊后，優先級將高于所有的偽類，會將上面3個偽類屬性覆蓋，所以要放在第二位。
- a:active放在最后一位是因為它是屬于鼠標已經其上按下、但還沒有釋放的操作，如果位置和a:hover對調位置，它將被a:hover覆蓋掉。
5.以下選擇器分別是什么意思?
選擇器.png
6.列出你知道的偽類選擇器
- E:first-child 匹配作為長子（第一個子女）的元素E
- E:link 匹配所有未被點擊的鏈接
- E:visited 匹配所有已被點擊的鏈接
- E:active 匹配鼠標已經其上按下、還沒有釋放的E元素
- E:hover 匹配鼠標懸停其上的E元素
- E:focus 匹配獲得當前焦點的E元素
- E:lang(c) 匹配lang屬性等于c的E元素
- E:enabled 匹配表單中可用的元素
- E:disabled 匹配表單中禁用的元素
- E:checked 匹配表單中被選中的radio或checkbox元素
- E::selection 匹配用戶當前選中的元素
- E:root 匹配文檔的根元素，對于HTML文檔，就是HTML元素
- 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:empty 匹配一個不包含任何子元素的元素，文本節點也被看作子元素
- E:not(selector) 匹配不符合當前選擇器的任何元素
7.div:first-child和div:first-of-type的作用和區別
- div:first-child 匹配div標簽的父元素下的第一個div子元素
- div:first-of-type 匹配div標簽的父元素下的第一個div子元素
區別：
:first-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。
:first-of-type 匹配的是該類型的第一個，類型是指什么呢，就是冒號前面匹配到的東西，比如 p:first-of-type，就是指所有p元素中的第一個。這里不再限制是第一個子元素了，只要是該類型元素的第一個就行了，當然這些元素的范圍都是屬于同一級的，也就是同輩的。
8.運行如下代碼，解析下輸出樣式的原因。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
- .item1:first-child{ color: red;}
指定父元素中第一個類名為item1的元素的字體顏色為紅色 - .item1:first-of-type{ background: blue;}
父元素中每一類元素的第一個類名為item1的元素的背景色為藍色，
（div中有p、h3兩類標簽，每一類的第一個類名為item1的元素背景變為藍色，所以：內容為aa和bb被選中變為藍色）
