1.CSS選擇器常見的有幾種?
- id選擇器
- class選擇器
- 屬性選擇器
- 分組選擇器
- 派生選擇器
- 偽類選擇器
- 組合選擇器
- 通配選擇器
2.選擇器的優(yōu)先級是怎樣的?
- 從高到低分別是：
- 在屬性后面使用！important會覆蓋頁面內任何位置定義的元素樣式拙寡，全局優(yōu)先級最高
- 作為style屬性寫在元素標簽上的內聯樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
3.class 和 id 的使用場景?
頭部尚揣，內容區(qū)域，尾部等主體內容用id，有時js特效類需要唯一性聋伦，這個時候需要使用“id”甜害，而主體內容的子容器或可復用的樣式用class。
4.使用CSS選擇器時為什么要劃定適當的命名空間玛臂？
- 保持可維護性
- 多人合作時避免和他人命名產生沖突
- 可以使代碼具有可讀性，更有語義化并且便于寫代碼和調試代碼
- 避免因為命名不規(guī)范而導致出錯
5.以下選擇器分別是什么意思?
6.列出你知道的偽類選擇器封孙？
- E:first-child -> 匹配元素E的第一個子元素
- E:last-child -> 匹配父元素的最后一個子元素
- E:first-of-type -> 匹配父元素下使用同種標簽的第一個子元素
- E:nth-last-child(n) -> 匹配其父元素的倒數第n個子元素迹冤，第一個編號為1
- E:only-child -> 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
- E:first-of-type -> 匹配父元素下使用同種標簽的第一個子元素虎忌，等同于:nth-of-type(1)
- E:last-of-type -> 匹配父元素下使用同種標簽的最后一個子元素叁巨，等同于:nth-last-of-type(1)
- E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
- E:nth-last-of-type(n) -> 與:nth-last-child() 作用類似呐籽，但是僅匹配使用同種標簽的元素
- E:only-of-type -> 匹配父元素下使用同種標簽的唯一一個子元素锋勺，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
- E:link -> 匹配所有未被點擊的鏈接
- E:visited -> 匹配所有已被點擊的鏈接
- E:active -> 匹配鼠標已經其上按下、還沒有釋放的E元素
- E:hover -> 匹配鼠標懸停其上的E元素
- E:focus -> 匹配獲得當前焦點的E元素
- E:empty -> 匹配一個不包含任何子元素的元素狡蝶，文本節(jié)點也被看作子元素
- E:not(selector) -> 匹配不符合當前選擇器的任何元素
7.:first-child和:first-of-type的作用和區(qū)別庶橱？
- :first-child選擇某父元素下第一個子元素。
- :first-of-type選擇某父元素下所有相同類型的子元素贪惹，其中排第一的那個子元素苏章，也可以說是是父元素下相同類型子元素中的第一個。
8.運行如下代碼奏瞬，解析下輸出樣式的原因枫绅。
輸出后的樣式為：
- .item1:first-child定義了aa為紅色字體。因為:first-child只匹配首個子元素硼端。
- .item1:first-of-type定義了aa和bb的背景為藍色并淋。因為:first-of-type匹配子元素該類型的第一個，aa為第一個P珍昨，bb為第一個h3县耽。
9.text-align:center的作用是什么句喷，作用在什么元素上？能讓什么元素水平居中兔毙？
但是如果我在行內元素span的樣式里加一個display:bolok;塊級元素澎剥，如下所示：
瀏覽后的頁面：
由此可以得出結論如下：
text-align:center
- 作用：使元素水平居中。
- 作用在塊級元素上哑姚。
- 能塊級元素內部的行內元素居中祭饭。
10.如果遇到一個屬性想知道兼容性，在哪查看?
用caniuse來查看
