1.class 和 id 的使用場景?

• id的使用場景: id只能被使用一次，在頁面分段等場景下可以使用。
• class的使用場景: class可以多次使用，用來給不同的元素設(shè)置相同的樣式。

2.CSS選擇器常見的有幾種?

1.基礎(chǔ)選擇器
包含通配符選擇器，標(biāo)簽選擇器，類選擇器，id選擇器。

2.組合選擇器
包含:

• 多元素選擇器(a,b):用,分隔，同時(shí)匹配元素E或元素F
• 后代選擇器(e f):用空格分隔，匹配E元素所有的后代元素F(全部)
• 子元素選擇器(e>f):用>分隔，匹配E元素的所有直接子元素(下一級)
• 直接相鄰選擇器(e+f): 匹配E元素之后的相鄰的同級元素F(不改變+號前面e的樣式)
• 普通相鄰選擇器(e~f): 匹配E元素之后的全部同級元素F

3.屬性選擇器

• E[attr]:匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
• E[attr = value]:匹配屬性attr值為value的元素(div[id=test] 匹配id=test的div)

4.偽類選擇器

• E:hover/link/active/visited:給元素在某個(gè)狀態(tài)下添加樣式
• E:nth-child(n):選中第n個(gè)子元素
• E:first-child 選取作為父元素第一個(gè)子元素的E元素(F E:first-child)
• E:last-child:選取作為父元素最后一個(gè)個(gè)子元素的E元素
• E:nth-of-type(n):與:nth-child(n)作用類似，但是僅匹配使用同種標(biāo)簽的元素(與E相同的子元素)
• E:enabled/disabled : 選取表單中可用/禁用的元素

5.偽元素選擇器

• E::before : 在E元素之前插入生成的內(nèi)容
• E::after : 在E元素之后插入生成的內(nèi)容

3.選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計(jì)算優(yōu)先級？

CSS優(yōu)先級從高到低分別是:
在屬性后面使用 !important > 內(nèi)聯(lián)樣式 > id選擇器 > 類選擇器 > 偽類選擇器 > 屬性選擇器 >標(biāo)簽選擇器 > 通配符選擇器 > 瀏覽器自定義
在復(fù)雜場景下先計(jì)算優(yōu)先級最高的元素的個(gè)數(shù),個(gè)數(shù)多優(yōu)先級高,若相同則比較優(yōu)先級第二高的,以此類推.

4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？

a:link最先，然后是a:visited.之后是a:hover,最后是a:active.
寫在后面的樣式會覆蓋寫在前面的樣式,對于a:link,如果放在后面則會覆蓋掉放在前面的樣式,所以應(yīng)該放在最前面。a:visited生效時(shí)應(yīng)該覆蓋掉a:link又不影響到其它兩個(gè)，所以放在a:link的后面。a:active必須要鼠標(biāo)放在元素上才能生效，而這會先調(diào)用a:hover的樣式，所以a:active需要放在a:hover的后面，否則會被a:hover覆蓋掉。(生效范圍小的放在后面)

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

• #header : 選擇id為header的元素
• .header : 選擇類為header的元素
• .header .logo : 選擇header類中的logo類中的元素
• .header.mobile : 選擇類名中既有header又有mobile的元素
• .header p, .header h3 : 選擇header類中的p和h3元素
• #header .nav>li : 選擇id為header下的nav類中第一層子元素中的li
• #header a:hover : 選擇id為header下的在hover狀態(tài)下的a鏈接
• #header .logo~p : 選擇id為header下的在logo類之后與logo類同級的p元素(不包括logo類和logo類之前的元素)
• #header input[type="text"] : id為header下的input的type為text的元素

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

見2

7.div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）

div:first-child : 選擇其父元素中既是第一個(gè)又是標(biāo)簽為div的子元素(不滿足就不選)
div :first-child : 選擇每個(gè)div中的第一個(gè)元素
div:first-of-type: 選擇其父元素中的第一個(gè)div元素
div :first-of-type : 選擇每個(gè)div下第一次出現(xiàn)的標(biāo)簽

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

捕獲.JPG

.item1:first-child改變div下第一個(gè)元素的樣式，所以aa變紅了。
.item1:first-of-type改變div下第一次出現(xiàn)的標(biāo)簽的樣式，所以第一個(gè)p所在的第一行和第一個(gè)h3所在的第二行背景色變藍(lán)了。