1. class 和 id 的使用場景?
class用于選擇同一類型的元素瓷耙，id用于選擇獨一無二的一個元素
2 CSS選擇器常見的有幾種?
- 通用元素選擇器太伊，匹配頁面任何元素（這也就決定了我們很少使用）
-
id id選擇器剿另，匹配特定id的元素
- .class 類選擇器箫锤，匹配class包含(不是等于)特定類的元素
- element 標簽選擇器
3. 選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級？
順序為
- 在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
- 作為style屬性寫在元素標簽上的內聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
對于復雜場景如何計算優(yōu)先級雨女？
１．根據(jù)組合選擇器按照以下規(guī)則統(tǒng)計各類選擇器的個數(shù)：
行內樣式 --> 統(tǒng)計值為a
ID選擇器 --> 統(tǒng)計值為b
類谚攒、屬性選擇器、偽類選擇器 --> 統(tǒng)計為c
標簽選擇器氛堕、偽類選擇器 --> 統(tǒng)計為d
2.
再比較a值的大小馏臭，a值大的則優(yōu)先級高;如果a值相等，則再比較b值的大小讼稚，b值大的優(yōu)先級高括儒；如果b值相等浪耘，則比較c值的大小，c值大的優(yōu)先級高塑崖；如果c值相等七冲，則比較d值的大小，d值大的優(yōu)先級高规婆；
4. a:link, a:hover, a:active, a:visited 的順序是怎樣的澜躺？ 為什么？
順序為
- a:link
- a:visited
- a:hover
- a:active
因為這幾個選擇器的優(yōu)先級一樣抒蚜，但是他們的樣式會互相覆蓋掘鄙。所以要按一定的順序排列。
5. 以下選擇器分別是什么意思?
header{ } id=header的元素
- .header{ } class=header的元素
- .header .logo{ } class=header 后代中 class=logo的元素
- .header.mobile{ } 同時包含class=header和class=mobile的元素
- .header p, .header h3{ } class=header后代中的p標簽和h3標簽
-
header .nav>li{ } id=header的后代中class=nav元素的直接子元素為li的標簽
-
header a:hover{ } id=header后代中的a標簽在鼠標停留在上面的狀態(tài)
-
header .logo~p{ } id=header后代中 class=logo元素之后所有同級元素的p標簽
-
header input[type=“text”]{ } id=header的后代中嗡髓，input標簽中操漠，屬性type的值為"text"的所有元素
6. 列出你知道的偽類選擇器
- 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 匹配用戶當前選中的元素
8. div:first-child和div:first-of-type的作用和區(qū)別
- div:first-child 匹配其父元素的第一個子元素
- div:first-of-type 匹配其父元素下?lián)碛邢嗤瑯撕灥牡谝粋€元素
9. 運行如下代碼饿这，解析下輸出樣式的原因浊伙。
