1、class 和 id 的使用場(chǎng)景?

1. class 重在樣式的復(fù)用，重普遍性。
2. id重在劃分樣式區(qū)域，可以作為樣式表中的命名空間來(lái)管理樣式。
3. id也可以指定某一個(gè)特殊元素的樣式，重特殊性。
4. id選擇器是不支持空格分隔的id列表的，不像class
5. 大小寫(xiě)敏感

注意：在html中聲明多個(gè)一樣的ID的元素，在css中該ID的樣式，這些元素則都會(huì)生效。而在javascript中用DOM選擇器只會(huì)選到第一個(gè)元素。

2、CSS選擇器常見(jiàn)的有幾種?

1. 通用符號(hào)選擇器

* {
    color:red;    //整個(gè)頁(yè)面所以元素顏色均為紅色
}

2. 標(biāo)簽元素選擇器：直接寫(xiě)標(biāo)簽名element

div{}
p{}

3. 類(lèi)選擇器 與 id選擇器

.classname{}    
    *.class{}    //可以忽略通配符號(hào)*
    .foo.error{}    //復(fù)合類(lèi)選擇器
#id
    *#id{}    //可以忽略通配符號(hào)*

4. 屬性選擇器

[attr]    //包含attr屬性的元素
p[attr1][attr2]    //包含attr1和attr2屬性的p元素
p[attr=1]    //包含attr屬性，并且值為1的p標(biāo)簽元素
[attr~="abc"]    //只需attr有包含abc即可被選取。部分屬性值選擇器，可用于任何屬性上而不是只在class上
[foo^="bar"]    //選擇foo屬性以bar開(kāi)頭的所有元素
[foo$="bar"]    //選擇foo屬性以bar結(jié)尾的所有元素
[foo*="bar"]    //選擇foo屬性中包含bar的所有元素
[foo | ="bar"]    //選擇foo屬性中等于bar或者以bar-開(kāi)頭的所有元素

5. 后代選擇器

h1 em{}    //選擇h1的后代em
h1>em{}    //選擇h1的兒子em
a+b    //相鄰兄弟選擇器，選擇a與b相鄰的b元素

6. 偽類(lèi)選擇器、偽元素選擇器

以下選擇器優(yōu)先級(jí)相同，考慮他們會(huì)相互覆蓋，建議按照這個(gè)順序：

鏈接偽類(lèi)\動(dòng)態(tài)偽類(lèi)
a:link    //匹配所有未被點(diǎn)擊的鏈接
a:visited    //匹配所有已被點(diǎn)擊的鏈接(css只能為其設(shè)置顏色，為了不泄露用戶點(diǎn)擊過(guò)網(wǎng)站的隱私)
a:focus    //匹配獲得當(dāng)前焦點(diǎn)的E元素
a:hover    //鼠標(biāo)懸停其上的a元素
a:active    //匹配鼠標(biāo)已經(jīng)其上按下、還沒(méi)有釋放的元素

ps：記這順序有個(gè)小招數(shù)，“LoVe？ HA!”
pps：LV HA，買(mǎi)了個(gè)LV包包，邊走邊笑HA

位置偽類(lèi)
a:first-child    //匹配元素a的第一個(gè)子元素
a:last-child    //匹配元素a的最后一個(gè)子元素
a:nth-child(1)
a:nth-last-child(1)    //odd(奇數(shù))/even(偶數(shù))

:first-letter    //選擇一段文本的第一個(gè)字母
:first-line    //選擇一段文本的第一行文本

a::before
a::after     //匹配a元素之前插入生成的內(nèi)容

E:lang(c)       //匹配lang屬性等于c的E元素
E:enabled    //匹配表單中可用的元素
E:disabled    //匹配表單中禁用的元素
E:checked    //匹配表單中被選中的radio或checkbox元素
E::selection    //匹配用戶當(dāng)前選中的元素

:not(p.a#b)    //選擇器取反

Odd 和 even 是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞（第一個(gè)子元素的下標(biāo)是 1）。

如下代碼，0dd為奇數(shù) tr元素指定紅色，even為偶數(shù) tr元素指定黃色背景色：

tr:nth-child(even){
    background: yellow;
}
tr:nth-child(Odd){
    background: red;
}

odd even

3、選擇器的優(yōu)先級(jí)

從高到低排序

1. 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
2. 作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3. id選擇器#id
4. 類(lèi)選擇器.class
5. 偽類(lèi)選擇器a:hover
6. 屬性選擇器[title="foo"]
7. 標(biāo)簽選擇器p a h1
8. 通配符選擇器*
9. 瀏覽器自定義

復(fù)雜場(chǎng)景

比如
<p style="color: green;">    //1,0,0,0
#id{color:red}    //0,1,0,0
h2.grape{color:red}    //0,0,1,1
h1{color:red}    //0,0,0,1

使用ID選擇器和屬性選擇器 選擇同一個(gè)元素區(qū)別在于ID選擇器的優(yōu)先級(jí)更高
h1#page-title    //0,1,0,1    winner!   
h1[id="page-title"]    //0,0,1,1 

ps:四位的無(wú)窮進(jìn)制數(shù)；通配符和連接符如 > + ~ 等特殊性為0不參與優(yōu)先級(jí)的計(jì)算；繼承無(wú)特殊性

4、什么是 CSS 繼承? 哪些屬性能繼承，哪些不能？

CSS 繼承：子元素沒(méi)有指定值的情況繼承父元素的屬性。

所有元素可繼承：visibility和cursor
內(nèi)聯(lián)元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
終端塊狀元素可繼承：text-indent和text-align
列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可繼承：border-collapse

不可繼承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi

總結(jié)：一般一些字體呀，文本呀，顏色等的設(shè)置都是可繼承屬性；非繼承屬性大部分都是一些和定位呀，浮動(dòng)呀，盒子模型呀等有關(guān)

關(guān)于繼承無(wú)特殊性

繼承沒(méi)有特殊性

因?yàn)橥ㄅ浞m用所有元素，而且有0特殊性，而繼承值根本沒(méi)有特殊性，因此<em>顯示的顏色為紅色

聲明權(quán)重排序

1. 讀者的重要聲明
2. 作者的重要聲明
3. 作者的普通聲明
4. 讀者的普通聲明
5. 用戶代理聲明

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

6、div:first-child與div:first-of-type的作用和區(qū)別?

1、div:first-child 匹配父元素下，作為第一個(gè)子元素的div元素
2、div:first-of-type 匹配父元素的子元素中，第一個(gè)div元素

div:first-child 和 div:first-of-type 區(qū)別

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

1、div :first-child 匹配所有div元素內(nèi)所有元素中屬于其父元素的首個(gè)子元素
2、div :first-of-type 匹配所有div元素內(nèi)所有元素中屬于其父元素的首個(gè)類(lèi)型的子元素

css選擇器32關(guān)小游戲
牢記31種CSS選擇器用法