1 . 常見(jiàn)的CSS選擇器

基礎(chǔ)選擇器：
通用元素選擇器，匹配頁(yè)面所有元素。#id
id選擇器，匹配特定id的元素。.class
類選擇器，匹配所有特定class的元素。element
標(biāo)簽選擇器，匹配特定元素。

組合選擇器，對(duì)選擇器進(jìn)行分組，選擇被分組的選擇器對(duì)應(yīng)的元素。E, F
多元素選擇器，同時(shí)匹配E和F元素。E F
后代選擇器，匹配E的所有后代F。E>F
子元素選擇器，匹配E的所有直接子元素F。E+F
直接相鄰選擇器，匹配E元素之后的相鄰的同級(jí)元素F。E~F
普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級(jí)元素F（無(wú)論直接相鄰與否）。

屬性選擇器，以元素的某個(gè)屬性作為選擇元素的依據(jù)。E[attr]
匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div。E[attr = value]
匹配屬性attr值為value的元素，例如div[id=test]，匹配id=test的div。E[attr ~= value]
匹配所有屬性attr具有多個(gè)空格分隔、其中一個(gè)值等于value的元素。E[attr ^= value]
匹配屬性attr的值以value開(kāi)頭的元素。E[attr $= value]
匹配屬性attr的值以value結(jié)尾的元素。E[attr *= value]
匹配屬性attr的值包含value的元素。

偽類選擇器：E:link
匹配所有未被點(diǎn)擊的鏈接。E:hover
匹配鼠標(biāo)懸停其上的E元素。E:active
匹配鼠標(biāo)已經(jīng)其上按下、還沒(méi)有釋放的E元素。E:visited
匹配所有已被點(diǎn)擊的鏈接。E:focus
匹配獲得當(dāng)前焦點(diǎn)的E元素。E:checked
匹配表單中被選中的radio或checkbox元素。E:first(last)-child
匹配父元素的第一個(gè)(最后一個(gè))子元素。E:first(last)-of-type
匹配父元素下使用同種標(biāo)簽的第一個(gè)(最后一個(gè))子元素。

2 . 選擇器的優(yōu)先級(jí)是怎樣的

• !important > 標(biāo)簽內(nèi)樣式 > id選擇器 > 類選擇器 > 偽類選擇器 > 屬性選擇器 > 標(biāo)簽選擇器 > 通配符選擇器 > 瀏覽器默認(rèn)樣式
  選擇器的優(yōu)先級(jí)從高到低分別是：
  !important ,在屬性后面使用會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。
  內(nèi)聯(lián)樣式，作為style屬性寫在元素標(biāo)簽上的，例如<span style="color:#444;">設(shè)置行內(nèi)樣式</span>
  id選擇器，例如#id{}
  類選擇器，例如.class{}
  偽類選擇器，例如:link{}
  屬性選擇器，例如input[type="text"]{}
  標(biāo)簽選擇器，例如p{}
  通配符選擇器，例如*{}
  瀏覽器自定義選擇器

3 . class 和 id 的使用場(chǎng)景

• class 用于主區(qū)塊里面的詳細(xì)內(nèi)容，同一個(gè)class可以重復(fù)出現(xiàn)，一個(gè)標(biāo)簽可以有幾個(gè)不同的class。class對(duì)應(yīng)的css命名以“.”開(kāi)頭
• id多使用于主要塊級(jí)元素，id一個(gè)頁(yè)面中只能出現(xiàn)一次，有些獨(dú)一無(wú)二的元素也可使用id。id對(duì)應(yīng)的css命名通常以“#”開(kāi)頭

4 . 使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g？

這是代碼語(yǔ)義化的一種體現(xiàn)，是為了更好地匹配我們特定需要匹配的元素，只對(duì)匹配的元素生效，保證代碼樣式在合理的控制內(nèi)不出現(xiàn)不必要的錯(cuò)誤

5 . 以下選擇器分別是什么意思

#header{
}
//選擇id名為header的元素
.header{
}
//選擇class名為header的元素
.header .logo{
}
//選擇class名為header的元素下的class名為logo的元素
.header.mobile{
}
//選擇class名同時(shí)為header和mobile的元素
.header p, .header h3{
}
//選擇class名為header的元素下的p和class名為header的元素下h3
#header .nav>li{
}
//選擇id名為header的元素下的class名為nav的直接子元素li
#header a:hover{
}
//選擇id名為header的元素下的a在鼠標(biāo)劃過(guò)時(shí)的樣式

6 . 列出你知道的偽類選擇器

E:link設(shè)置超鏈接a在未被訪問(wèn)前的樣式（特指a標(biāo)簽）
E:visited 設(shè)置超鏈接a其鏈接地址已被訪問(wèn)過(guò)的樣式（特指a標(biāo)簽）
E:hover 設(shè)置鼠標(biāo)懸停在元素上的樣式（不限于a標(biāo)簽）
E:active 設(shè)置元素在鼠標(biāo)按下時(shí)的樣式（不限于a標(biāo)簽）
E:not(s) 匹配不含有s選擇器的元素E
E:first-child 父元素的第一個(gè)子元素
E:last-child父元素的最后一個(gè)子元素 E
E:only-child E元素是唯一的子元素時(shí)被匹配
E:nth-child(n) 匹配父元素的第n個(gè)子元素E，假設(shè)該子元素不是E，則選擇符無(wú)效。
E:nth-last-child(n) 匹配父元素的倒數(shù)第n個(gè)子元素E，假設(shè)該子元素不是E，則選擇符無(wú)效。
E:first-of-type 匹配同類型中的第一個(gè)同級(jí)兄弟元素E。
E:last-of-type 匹配同類型中的最后一個(gè)同級(jí)兄弟元素E。
E:only-of-type 匹配同類型中的唯一的一個(gè)同級(jí)兄弟元素E。
E:nth-of-type(n) 匹配同類型中的第n個(gè)同級(jí)兄弟元素E。
E:nth-last-of-type(n) 匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素E。
E:empty 匹配沒(méi)有任何子元素（并且不包括空格、回車）的元素E
E:checked 匹配用戶界面上處于選中狀態(tài)的元素 E。(用于 input type 為 radio 與 checkbox 時(shí))
E:enabled 匹配用戶界面上處于可用狀態(tài)的元素E。
E:disabled 匹配用戶界面上處于禁用狀態(tài)的元素E。
E:target 匹配相關(guān)URL指向的E元素。
E:root匹配E元素在文檔的根元素。在HTML中，根元素永遠(yuǎn)是HTML。

7 . :first-child和:first-of-type的作用和區(qū)別

• :first-child 匹配的是某父元素的第一個(gè)子元素，可以說(shuō)是結(jié)構(gòu)上的第一個(gè)子元素。
• :first-of-type 匹配的是某父元素下相同類型子元素中的第一個(gè)。這里不再限制是第一個(gè)子元素了，只要是該類型元素的第一個(gè)就行了。

8 . 運(yùn)行如下代碼，解析下輸出樣式的原因。

<style>
.item1:first-child{ 
color: red;
}
.item1:first-of-type{
 background: blue;
 }
</style> 
  <div class="ct"> 
 <p class="item1">aa</p> 
  <h3 class="item1">bb</h3> 
 <h3 class="item1">ccc</h3>
  </div>

.item1:first-child 當(dāng)div中的第一個(gè)子元素的class="item1"時(shí)，樣式有效，所以內(nèi)容 aa 為紅色。.item1:first-of-type 選擇的是不同標(biāo)簽的第一個(gè)class="item1"的元素，并且標(biāo)簽p和h3都有class="item1"的元素，所以內(nèi)容aa和bb的背景為藍(lán)色。

9 .text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中

文字居中或者讓inline-block居中，一般作用在塊級(jí)元素上或者inline-block上，能讓塊級(jí)元素里的文字和inline-block元素居中，能讓inline-block里的文字居中。

10 . 如果遇到一個(gè)屬性想知道兼容性，在哪查看?

可以在Can I Use網(wǎng)站查看http://caniuse.com