問題1. class 和 id 的使用場景?
class 常用于多個標簽統(tǒng)一進行樣式適配，在 CSS 文件中以 .xxx{} 進行樣式調(diào)試；
id 在一個 HTML 頁面中只為一個標簽單獨使用，僅對這個標簽有效，在 CSS 文件中以#xxx{} 進行樣式調(diào)試。
問題2. CSS選擇器常見的有幾種?
基礎選擇器/組合選擇器/屬性選擇器/偽類選擇器/偽元素選擇器
問題3. 選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級？
優(yōu)先級從高到低分別是
1.在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
2.作為 style 屬性寫在元素標簽上的內(nèi)聯(lián)樣式
3.id 選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標簽選擇器
8.通配符選擇器
9.瀏覽器自定義
應對復雜場景
| 選擇器分類 | 標識 |
|---|---|
行內(nèi)樣式 <div style="xxx"></div>
|
a |
| ID 選擇器 | b |
| 類/屬性選擇器/偽類選擇器 | c |
| 標簽選擇器/偽元素選擇器 | d |
- 面對兩條復雜的 CSS 組合選擇器之間進行權(quán)重選擇，我們將這兩條組合選擇器中的各個選擇器都挑出來，按照上表選擇器分類并進行相對應的標識。
- 然后由標識 a 到 b 比較兩條復雜組合選擇器各自擁有上述各標識選擇器分類的多少，如果一條復雜選擇器擁有 a 標識數(shù)目大于另一條，則權(quán)重高于另一條，不再考慮其它標識；如果兩者擁有 a 標識數(shù)目相同，則再考慮 b 標識，若一者擁有 b 標識數(shù)目大于另一方，則權(quán)重高于另一方，不再考慮 c 和 d 標識。
- 以此類推，最終得出哪條復雜選擇器擁有的權(quán)重更高。
例：
#test p.class1 {...}
#test .class1.class2 {...}
//兩者對應同一元素，元素聽誰的？
解：
| 復雜選擇器 | 標識數(shù) |
|---|---|
| #test p.class1 {...} | a=0, b=1, c=1, d=1 |
| #test .class1.class2 {...} | a=0, b=1, c=2, d=0 |
由該表可知，標識 a 和 b 兩條復雜選擇器擁有數(shù)目相同，而標識 c 第二行擁有數(shù)高于第一行，因此第二行的權(quán)重高于第一行。
問題4. a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
<style type="text/css">
a {
color: red;
}
a:visited { //小心順序
color: black;
}
a:hover {
color: blue;
}
a:active {
color: yellow;
}
</style>
順序是 a:link -> a:visited -> a:hover -> a:active，如果不按照這個順序，則可能出現(xiàn)屬性被相互覆蓋而無法獲得想要得到的效果。
問題5.以下選擇器分別是什么意思?
#header{
} //選取 Class 為 header 的元素
.header{
} //選取 ID 為 header 的元素
.header .logo{
} //選取 ID 為 header 的所有 ID 為 logo 的后代；
.header.mobile{
} //選取 Class 中同時包含 header 和 mobile 的元素；
.header p, .header h3{
} //選取 Class 中包含 header 的 p 標簽和 h3 標簽
#header .nav>li{
} //選取 Class 包含 header 的 ID 為 nav 的后代元素的所有標簽為 li 的直接子元素
#header a:hover{
} //選取 Class 包含 header 的所有標簽為 a :hover 后代元素
#header .logo~p{
} //選取 Class 包含 header 的 ID 為 logo 的子元素之后的同級標簽為 p 的元素
#header input[type="text"]{
} //選取 Class 包含 header 的后代元素中標簽為 input 同時 type="text"的元素
列出你知道的偽類選擇器
| 偽類選擇器 | 含義 |
|---|---|
| E:first-child | 匹配元素E的第一個子元素 |
| E:link | 匹配所有未被點擊的鏈接 |
| E:visited | 匹配所有已被點擊的鏈接 |
| E:active | 匹配鼠標已經(jīng)其上按下、還沒有釋放的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) | 匹配其父元素的倒數(shù)第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 |
| E:empty | 匹配一個不包含任何子元素的元素，文本節(jié)點也被看作子元素 |
| E:not(selector) | 匹配不符合當前選擇器的任何元素 |
div:first-child 和 div:first-of-type 的作用和區(qū)別
div:first-child：匹配其父元素的第一個子元素，其選取了所有 div 標簽的父元素的第一個子元素。
div:first-of-type：匹配其父元素第一個使用同種標簽的子元素，其選取了所有 div 標簽的父元素的第一個也是 div 標簽的子元素。
運行如下代碼，解析下輸出樣式的原因
<style>
.item1:first-child{
color: red;
} //該選擇器選擇了所有 Class 為 item1 的父元素的第一個子元素
.item1:first-of-type{
background: blue;
} //該選擇器選擇了所有 Class 為 item1 的元素（標識 A）的父元素的第一個標簽與 A 元素相同的子元素
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
CSS 中的第一個選擇器選擇了所有 Class 為 item1 的父元素的第一個子元素，三個 Class 為 item1 的元素的父元素都是<div class="ct">，其第一個子元素為<p class="item1">aa</p>，故 aa 顯示為紅色。
CSS 中的第二個選擇器選擇了所有 Class 為 item1 的元素（標識 A）的父元素的第一個標簽與 A 元素相同的子元素，<p class="item1">aa</p>父元素的第一個標簽為 p 的子元素即是其自身，<h3 class="item1">bb</h3> 和 <h3 class="item1">ccc</h3>的父元素的第一個標簽為 h3 的子元素為<h3 class="item1">bb</h3>，故而 aa 和 ccc 的背景顏色為藍色。
