1.CSS選擇器常見的有幾種?
- id選擇器
- class選擇器
- 屬性選擇器
- 分組選擇器
- 派生選擇器
- 偽類選擇器
- 組合選擇器
- 通配選擇器
2.選擇器的優(yōu)先級是怎樣的?
- 從高到低分別是：
- 在屬性后面使用！important會覆蓋頁面內(nèi)任何位置定義的元素樣式，全局優(yōu)先級最高
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
3.class 和 id 的使用場景?
頭部，內(nèi)容區(qū)域，尾部等主體內(nèi)容用id，有時js特效類需要唯一性，這個時候需要使用“id”，而主體內(nèi)容的子容器或可復(fù)用的樣式用class。
4.使用CSS選擇器時為什么要劃定適當(dāng)?shù)拿臻g？
- 保持可維護(hù)性
- 多人合作時避免和他人命名產(chǎn)生沖突
- 可以使代碼具有可讀性，更有語義化并且便于寫代碼和調(diào)試代碼
- 避免因為命名不規(guī)范而導(dǎo)致出錯
5.以下選擇器分別是什么意思?
6.列出你知道的偽類選擇器？
- E:first-child -> 匹配元素E的第一個子元素
- E:last-child -> 匹配父元素的最后一個子元素
- E:first-of-type -> 匹配父元素下使用同種標(biāo)簽的第一個子元素
- E:nth-last-child(n) -> 匹配其父元素的倒數(shù)第n個子元素，第一個編號為1
- E:only-child -> 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
- E:first-of-type -> 匹配父元素下使用同種標(biāo)簽的第一個子元素，等同于:nth-of-type(1)
- E:last-of-type -> 匹配父元素下使用同種標(biāo)簽的最后一個子元素，等同于:nth-last-of-type(1)
- E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
- E:nth-last-of-type(n) -> 與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素
- E:only-of-type -> 匹配父元素下使用同種標(biāo)簽的唯一一個子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
- E:link -> 匹配所有未被點(diǎn)擊的鏈接
- E:visited -> 匹配所有已被點(diǎn)擊的鏈接
- E:active -> 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素
- E:hover -> 匹配鼠標(biāo)懸停其上的E元素
- E:focus -> 匹配獲得當(dāng)前焦點(diǎn)的E元素
- E:empty -> 匹配一個不包含任何子元素的元素，文本節(jié)點(diǎn)也被看作子元素
- E:not(selector) -> 匹配不符合當(dāng)前選擇器的任何元素
7.:first-child和:first-of-type的作用和區(qū)別？
- :first-child選擇某父元素下第一個子元素。
- :first-of-type選擇某父元素下所有相同類型的子元素，其中排第一的那個子元素，也可以說是是父元素下相同類型子元素中的第一個。
8.運(yùn)行如下代碼，解析下輸出樣式的原因。
輸出后的樣式為：
- .item1:first-child定義了aa為紅色字體。因為:first-child只匹配首個子元素。
- .item1:first-of-type定義了aa和bb的背景為藍(lán)色。因為:first-of-type匹配子元素該類型的第一個，aa為第一個P，bb為第一個h3。
9.text-align:center的作用是什么，作用在什么元素上？能讓什么元素水平居中？
但是如果我在行內(nèi)元素span的樣式里加一個display:bolok;塊級元素，如下所示：
瀏覽后的頁面：
由此可以得出結(jié)論如下：
text-align:center
- 作用：使元素水平居中。
- 作用在塊級元素上。
- 能塊級元素內(nèi)部的行內(nèi)元素居中。
10.如果遇到一個屬性想知道兼容性，在哪查看?
用caniuse來查看
