1娇斩、class 和 id 的使用場景?
- class 重在樣式的復用，重普遍性穴翩。
- id重在劃分樣式區(qū)域犬第，可以作為樣式表中的命名空間來管理樣式。
- id也可以指定某一個特殊元素的樣式芒帕，重特殊性歉嗓。
- id選擇器是不支持空格分隔的id列表的，不像class
- 大小寫敏感
注意：在html中聲明多個一樣的ID的元素背蟆，在css中該ID的樣式鉴分，這些元素則都會生效哮幢。而在javascript中用DOM選擇器只會選到第一個元素。
2志珍、CSS選擇器常見的有幾種?
1. 通用符號選擇器
* {
color:red; //整個頁面所以元素顏色均為紅色
}
2. 標簽元素選擇器：直接寫標簽名element
div{}
p{}
3. 類選擇器 與 id選擇器
.classname{}
*.class{} //可以忽略通配符號*
.foo.error{} //復合類選擇器
#id
*#id{} //可以忽略通配符號*
4. 屬性選擇器
[attr] //包含attr屬性的元素
p[attr1][attr2] //包含attr1和attr2屬性的p元素
p[attr=1] //包含attr屬性橙垢，并且值為1的p標簽元素
[attr~="abc"] //只需attr有包含abc即可被選取。部分屬性值選擇器伦糯，可用于任何屬性上而不是只在class上
[foo^="bar"] //選擇foo屬性以bar開頭的所有元素
[foo$="bar"] //選擇foo屬性以bar結(jié)尾的所有元素
[foo*="bar"] //選擇foo屬性中包含bar的所有元素
[foo | ="bar"] //選擇foo屬性中等于bar或者以bar-開頭的所有元素
5. 后代選擇器
h1 em{} //選擇h1的后代em
h1>em{} //選擇h1的兒子em
a+b //相鄰兄弟選擇器柜某，選擇a與b相鄰的b元素
6. 偽類選擇器、偽元素選擇器
以下選擇器優(yōu)先級相同敛纲，考慮他們會相互覆蓋喂击，建議按照這個順序：
鏈接偽類\動態(tài)偽類
a:link //匹配所有未被點擊的鏈接
a:visited //匹配所有已被點擊的鏈接(css只能為其設(shè)置顏色，為了不泄露用戶點擊過網(wǎng)站的隱私)
a:focus //匹配獲得當前焦點的E元素
a:hover //鼠標懸停其上的a元素
a:active //匹配鼠標已經(jīng)其上按下淤翔、還沒有釋放的元素
ps：記這順序有個小招數(shù)翰绊，“LoVe？ HA!”
pps：LV HA旁壮，買了個LV包包监嗜，邊走邊笑HA
位置偽類
a:first-child //匹配元素a的第一個子元素
a:last-child //匹配元素a的最后一個子元素
a:nth-child(1)
a:nth-last-child(1) //odd(奇數(shù))/even(偶數(shù))
:first-letter //選擇一段文本的第一個字母
: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 //匹配用戶當前選中的元素
:not(p.a#b) //選擇器取反
Odd 和 even 是可用于匹配下標是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞（第一個子元素的下標是 1）。
如下代碼寡具，0dd為奇數(shù) tr元素指定紅色秤茅，even為偶數(shù) tr元素指定黃色背景色：
tr:nth-child(even){
background: yellow;
}
tr:nth-child(Odd){
background: red;
}
3、選擇器的優(yōu)先級
從高到低排序
- 在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標簽上的內(nèi)聯(lián)樣式
- id選擇器
#id - 類選擇器
.class - 偽類選擇器
a:hover - 屬性選擇器
[title="foo"] - 標簽選擇器
p a h1 - 通配符選擇器
* - 瀏覽器自定義
復雜場景
| 0 | 0 | 0 | 0 |
|---|---|---|---|
行內(nèi)樣式 <div style="xxx"></div>
|
ID 選擇器 | 類童叠，屬性選擇器和偽類選擇器 | 標簽選擇器框喳、偽元素 |
比如
<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選擇器和屬性選擇器 選擇同一個元素區(qū)別在于ID選擇器的優(yōu)先級更高
h1#page-title //0,1,0,1 winner!
h1[id="page-title"] //0,0,1,1
ps:四位的無窮進制數(shù)；通配符和連接符如 > + ~ 等特殊性為0不參與優(yōu)先級的計算厦坛；繼承無特殊性
4五垮、什么是 CSS 繼承? 哪些屬性能繼承，哪些不能杜秸？
CSS 繼承：子元素沒有指定值的情況繼承父元素的屬性放仗。
所有元素可繼承：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è)置都是可繼承屬性；非繼承屬性大部分都是一些和定位呀舰始，浮動呀崇棠，盒子模型呀等有關(guān)
關(guān)于繼承無特殊性
因為通配符適用所有元素，而且有0特殊性蔽午，而繼承值根本沒有特殊性易茬，因此<em>顯示的顏色為紅色
聲明權(quán)重排序
- 讀者的重要聲明
- 作者的重要聲明
- 作者的普通聲明
- 讀者的普通聲明
- 用戶代理聲明
5、以下選擇器分別是什么意思?
6、div:first-child與div:first-of-type的作用和區(qū)別?
1抽莱、div:first-child 匹配父元素下范抓，作為第一個子元素的div元素
2、div:first-of-type 匹配父元素的子元素中食铐，第一個div元素
.item1:first-child 匹配class名為item1的第一個元素為紅色
.item1:first-of-type 匹配class名為item1不同類型元素的第一個匕垫，比如第一個
<p>標簽，第一個<h3>背景樣式為藍色
7虐呻、div :first-child與div :first-of-type的的作用和區(qū)別(注意空格的作用)?
1象泵、div :first-child 匹配所有div元素內(nèi)所有元素中屬于其父元素的首個子元素
2、div :first-of-type 匹配所有div元素內(nèi)所有元素中屬于其父元素的首個類型的子元素
