1. class 和 id 的使用場景?
- class 作用是定義某一類元素，可以有多個元素擁有同一class
- id 是單一識別屬性，在同一頁面中，每種id只能有一個
2. CSS選擇器常見的有幾種?
CSS常見的選擇器有：
1.基礎選擇器
| 選擇器 | 含義 |
|---|---|
| * | 通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用） |
| #id | id選擇器，匹配特定id的元素 |
| .class | 類選擇器，匹配class包含(不是等于)特定類的元素 |
| element | 標簽選擇器 |
2.組合選擇器
| 選擇器 | 含義 |
|---|---|
| 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選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素 |
3.屬性選擇器
| 選擇器 | 含義 |
|---|---|
| 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的元素 |
4.偽類選擇器
| 選擇器 | 含義 |
|---|---|
| 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) | 匹配不符合當前選擇器的任何元素 |
5.偽元素選擇器
| 選擇器 | 含義 |
|---|---|
| E::first-line | 匹配E元素內容的第一行 |
| E::first-letter | 匹配E元素內容的第一個字母 |
| E::before | 在E元素之前插入生成的內容 |
| E::after | 在E元素之后插入生成的內容 |
3. 選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
優先級由上到下
- !important
- 使用style內聯樣式
- id
- class 類
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義樣式
復雜情景優先級計算：
- 將上方選擇器2設為a，選擇器3設為b，選擇器4-6設為c，選擇器7與偽元素選擇器設為d；
- 然后分別計算情景中a,b,c,d類型選擇器數量;
- 誰的數量多誰的優先級就高;
- 數量相同，則優先級順序：a>b>c>d.
4. a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
a:link, a:hover, a:active, a:visited都為偽類選擇器，優先級相同，在樣式文件中，誰的書寫順序越靠后誰的優先級就越高。
5. 以下選擇器分別是什么意思?
#header{ }
選取id為header的元素
.header{ }
選取class為header的元素
.header .logo{ }
選擇header類元素下所有logo類后代元素
.header.mobile{ }
選擇既有header類又有mobile類的元素
.header p, .header h3{ }
選擇header類元素下標簽為h3和p的后代元素
#header .nav>li{ }
選擇id為header的元素下nav類后代元素的所有li標簽子元素
#header a:hover{ }
選擇id為header的元素的處于懸停狀態的a標簽后代元素
#header .logo~p{ }
選擇與id為header的元素的logo類后代元素同級的p標簽元素
#header input[type="text"]{ }
選擇id為header的元素下標簽為input（其type屬性為text）后代元素
6. 列出你知道的偽類選擇器
見第2題偽類選擇器部分
7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 （注意空格的作用）
| 名稱 | 作用 | 區別 |
|---|---|---|
| div:first-child | 匹配第一個div子元素 | |
| div:first-of-type | 匹配父元素下使用同種標簽的第一個子元素 | |
| div :first-child | 匹配div標簽下所有同級后代元素的第一個元素 | |
| div :first-of-type | 匹配div標簽下使用同種標簽的第一個元素 |
運行如下代碼，解析下輸出樣式的原因。
<style> // 選擇父元素的第一個item1類子元素并設置字體為紅色
.item1:first-child{
color: red;
}
.item1:first-of-type{ // 選擇所有父元素的第一個item1類的不同類型子元素并設置其背景為藍色
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p> //A
<h3 class="item1">bb</h3> //B
<h3 class="item1">ccc</h3> //C
</div>
- A行的元素為div父類下第一個item1類子元素元素，也為第一個p標簽子元素，所以字體為紅色同時背景設為藍色。
- B行的元素為div父類下第一個item1類h3標簽子元素，所以背景設置為藍色。
- C行的元素既不是第一個子元素，也不是第一個h3標簽元素，所以用默認樣式。
