1. class與id的使用場(chǎng)景
- 一個(gè)頁(yè)面中可以有多個(gè)同樣的class驮吱，可以用于不同標(biāo)簽但是樣式相同的元素上。
- 一個(gè)頁(yè)面中只允許有一個(gè)id，id具有唯一性梅忌，多用于標(biāo)記頁(yè)面分級(jí)的塊級(jí)標(biāo)簽上瑰枫。
2.css選擇器常見(jiàn)的有幾種
基礎(chǔ)選擇器
*通用選擇器尸诽，選擇頁(yè)面上的所有元素
#idid選擇器性含，選擇對(duì)應(yīng)id的元素
.classclass選擇器商蕴，選擇對(duì)應(yīng)class的一個(gè)或多個(gè)元素
element標(biāo)簽選擇器后德，選擇對(duì)應(yīng)標(biāo)簽名的一個(gè)或多個(gè)元素組合選擇器
E,F,...多元素選擇器理张，用逗號(hào)隔開(kāi)的表示選擇多個(gè)元素悟耘，E,F或更多都是并列關(guān)系移迫，他們同時(shí)被選取
E F后代選擇器邪媳，用空格隔開(kāi)的表示選取E的后代中的F元素
E>F子元素選擇器，表示選取E的直接后代中所有F元素，與上一條的區(qū)別在于是不是子元素顿肺。
eg：div>p此例中只會(huì)選擇class為p1的p元素旷祸，p2不會(huì)被選取
<div>
<p class="p1"></p>
<div>
<p class="p2"></p>
</div>
</div>
E+F 直接相鄰選擇器骚烧，表示選取E元素之后相鄰的同級(jí)F元素
E~F 普通相鄰選擇器，表示選取E元素后面的同級(jí)F元素，不論相鄰與否忠售。
- 屬性選擇器
E[attr]選取具有該屬性的元素。eg.p[name]選取所有有name屬性的p元素逝她。
E[attr=value]選取所有attr屬性的屬性值為value的元素 eg.p[name="p1"]會(huì)選取所有name屬性為 p1 的p元素
4.偽類(lèi)選擇器
E:first-child 選取作為父元素第一個(gè)子元素的E元素（實(shí)際形式是F E:first-child 區(qū)別于 E>:first-child）
E:last-child 選取作為父元素最后一個(gè)個(gè)子元素的E元素
E:nth-child() 選取作為父元素第n個(gè)子元素的E元素吗跋，n從1開(kāi)始取，n為1的時(shí)候等價(jià)于first-child 選擇器
E:hover/link/active/visited 選取E元素的某一狀態(tài)宁昭，給對(duì)應(yīng)狀態(tài)添加樣式
- 偽元素選擇器
E:first-letter選取E元素的第一個(gè)字母跌宛。eg.
p:first-letter{color:red} //n的顏色是紅色
<p>nihao</p>
E:before/after E元素的前面或后面的元素，一般用于在E元素的前面或后面插入元素积仗，可用來(lái)清除浮動(dòng)疆拘，或添加元素。
3. 選擇器的優(yōu)先級(jí)寂曹，復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)
它們之間的順序排列如下：
@import > 內(nèi)聯(lián)樣式 > id選擇器 > 類(lèi)選擇器哎迄、偽類(lèi)選擇器、屬性選擇器 > 標(biāo)簽選擇器隆圆、偽元素選擇器
在復(fù)雜的場(chǎng)景（即在應(yīng)用了各種的css選擇器的組合兩條或更多的css規(guī)則沖突時(shí)）漱挚，會(huì)先比較優(yōu)先級(jí)較高的選擇器個(gè)數(shù)，如果還相同則繼續(xù)向下渺氧，比較優(yōu)先級(jí)較低的選擇器的個(gè)數(shù)旨涝，以此類(lèi)推。
4. a:link, a:hover, a:active, a:visited 的順序
他們的順序是 a:link, a:visited,a:hover,a:active（鼠標(biāo)按下去時(shí)的狀態(tài)）
至于為什么這么拍侣背，首先白华，他們都是偽類(lèi)選擇器，相同的選擇器優(yōu)先級(jí)別當(dāng)然相同贩耐，所以自然而然會(huì)排在后面的覆蓋前面的樣式弧腥。a:hover如果在a:visited后面的話，那么當(dāng)該鏈接訪問(wèn)過(guò)后潮太，就會(huì)一直保持訪問(wèn)后的樣式管搪，鼠標(biāo)滑上去即hover樣式怎么也不會(huì)生效，因?yàn)楸桓采w了。至于a:active,放在前面的話那么樣式不會(huì)生效抛蚤，active生效的場(chǎng)景台谢，hover也會(huì)生效，hover就會(huì)覆蓋active岁经。
5. 常見(jiàn)選擇器實(shí)例
#header //選擇id為header的元素
.header //選擇class為header的所有元素
.header .logo //選擇class為header的所有元素后代中class為logo的所有元素
.header.mobile // 選擇class為header和mobile的所有元素 eg. <p class="header mobile"></p>
.header p,.header h3 //選取class為header的所有元素的后代中 p 元素和 h3 元素
#header .nav>li //id為header元素中后代中class為nav的元素的所有 li 子元素
#header a:hover //id為header元素中的所有a標(biāo)簽的hover狀態(tài)
#header .logo~p //id為header的元素后代中class為logo的元素的所有同級(jí)的p元素
#header input[type="text"] //id為header的元素后代中有屬性type且其值為text的所有input元素
6.偽類(lèi)選擇器
E:first-child 選取作為父元素第一個(gè)子元素的E元素
E:last-child 選取作為父元素最后一個(gè)個(gè)子元素的E元素
E:nth-child() 選取作為父元素第n個(gè)子元素的E元素朋沮，n從1開(kāi)始取，n為1的時(shí)候等價(jià)于first-child 選擇器
E:hover/link/active/visited 選取E元素的某一狀態(tài)缀壤，給對(duì)應(yīng)狀態(tài)添加樣式
E:enabled 選取表單中可用的元素
E:disabled 選取表單中禁用的元素
7. div:first-child樊拓、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別
div:first-child 選取作為父元素第一個(gè)子元素的div元素
div:first-of-type 選取父元素中第一個(gè)出現(xiàn)的div元素（后面的div就不選取了）
div :first-child 選取所有div元素中第一個(gè)子元素
div :first-of-type 選取所有div元素中第一個(gè)出現(xiàn)的各類(lèi)元素 eg.
<div>
<h3></h3> //選中
<p></p> //選中
<div></div> //選中
<div></div>
<p></p>
<p></p>
</div>
div :first-of-type //選取的如標(biāo)示
8. 代碼實(shí)踐
<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 選取作為父元素第一個(gè)子元素的class為item1的元素塘慕，自然aa的顏色要變紅
.item1:first-of-type 選取作為父元素第一個(gè)出現(xiàn)的各類(lèi)class為item1的元素筋夏，aa所在的p元素第一次出現(xiàn)，bb所在的h3元素第一次出現(xiàn)图呢，都被選中条篷，cc所在的h3在bb后面，因?yàn)閔3標(biāo)簽出現(xiàn)過(guò)一次蛤织，所以不再被選中赴叹。
