錯(cuò)誤的說(shuō)法
在學(xué)習(xí)過(guò)程中，你可能發(fā)現(xiàn)給選擇器加權(quán)值的說(shuō)法，即 ID 選擇器權(quán)值為 100，類選擇器權(quán)值為 10，標(biāo)簽選擇器權(quán)值為 1，當(dāng)一個(gè)選擇器由多個(gè) ID 選擇器、類選擇器或標(biāo)簽選擇器組成時(shí)，則將所有權(quán)值相加，然后再比較權(quán)值。這種說(shuō)法其實(shí)是有問(wèn)題的。比如一個(gè)由 11 個(gè)類選擇器組成的選擇器和一個(gè)由 1 個(gè) ID 選擇器組成的選擇器指向同一個(gè)標(biāo)簽，按理說(shuō) 110 > 100，應(yīng)該應(yīng)用前者的樣式，然而事實(shí)是應(yīng)用后者的樣式。錯(cuò)誤的原因是：選擇器的權(quán)值不能進(jìn)位。還是拿剛剛的例子說(shuō)明。11 個(gè)類選擇器組成的選擇器的總權(quán)值為 110，但因?yàn)?11 個(gè)均為類選擇器，所以其實(shí)總權(quán)值最多不能超過(guò) 100， 你可以理解為 99.99，所以最終應(yīng)用后者樣式。

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

• 這4個(gè)偽類優(yōu)先級(jí)相同，后邊的會(huì)產(chǎn)生覆蓋。
• 一個(gè)鏈接可能同時(shí)處于多種狀態(tài)，即同時(shí)屬于多個(gè)偽類。

未點(diǎn)擊鏈接前，link偽類長(zhǎng)期處于激活狀態(tài)，鼠標(biāo)懸停（或點(diǎn)擊）時(shí)，a鏈接同時(shí)處于link和hover(或active)狀態(tài)，由于它們特指度相同，
在同時(shí)激活的情況下，后出現(xiàn)的偽類樣式會(huì)覆蓋前面的偽類樣式，故link狀態(tài)必須寫在hover(或active)之前。
再討論hover和active的順序，若把hover放在active后面，當(dāng)點(diǎn)擊鏈接一瞬，實(shí)際你在激活active狀態(tài)的同時(shí)觸發(fā)了hover偽類,hover在后面覆蓋了active的顏色，所以無(wú)法看到active的顏色。故hover在active之前
其次，若把visited放在hover后面，那已訪問(wèn)過(guò)的鏈接一直觸發(fā)著visited偽類，會(huì)覆蓋hover樣式。
最后，若果只有l(wèi)ink、visited兩個(gè)偽類，它們之間順序無(wú)所謂。（因?yàn)樗鼈z不可能同時(shí)觸發(fā)，即又未訪問(wèn)同時(shí)又已訪問(wèn)。）

所以同時(shí)使用這四個(gè)偽類的順序是：a:link → a:hover→ a:active→ a:visited

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

/*id選擇器，匹配id值為header的元素*/
#header{
}
/*class選擇器，匹配class值為header的元素*/
.header{
}
/*后代選擇器，匹配class值為header元素的所有class值為logo的后代*/
.header .logo{
}
/*class選擇器，匹配class值包含header和mobile的元素 */
.header.mobile{
}
/*匹配class值為header元素后代中的p和h3元素*/
.header p, .header h3{
}
/*匹配id為header的后代中，類名為nav的直接子元素中的li標(biāo)簽*/
#header .nav>li{
}
 /*匹配id為header的后代a標(biāo)簽在hover狀態(tài)（鼠標(biāo)懸停）*/
#header a:hover{
}
/*匹配id為header的后代中，類名為logo的元素之后的同級(jí)元素中的p標(biāo)*/
#header .logo~p{
}
 /*匹配id為header的后代中，input標(biāo)簽中，屬性type的值為"text"的元素*/
#header input[type="text"]{
}

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

常見(jiàn)的偽類選擇器：

E:root 匹配文檔的根元素，對(duì)于HTML文檔，就是HTML元素
E:nth-child(n) 匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1
E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1
E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素
E:last-child 匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一個(gè)不包含任何子元素的元素，文本節(jié)點(diǎn)也被看作子元素
E:not(selector) 匹配不符合當(dāng)前選擇器的任何元素
n的取值1，2，3，4，5，2n+1, 2n, 4n-1，odd, even
E::first-line 匹配E元素內(nèi)容的第一行
E::first-letter 匹配E元素內(nèi)容的第一個(gè)字母
E::before 在E元素之前插入生成的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容

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è)div元素
• div :first-child div元素下的所有后代的第一個(gè)子元素
• div :first-of-type div元素下的所有后代中標(biāo)簽相同的第一個(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>

測(cè)試03.png

原因：

• .item1:first-child：即父元素div下第一個(gè)class為item的子元素，滿足條件的只有 <p class="item1">aa</p>，所以只有" aa "變?yōu)閞ed。
• .item1:first-of-type：即父元素div下的class為item且為同標(biāo)簽第一個(gè)元素的子元素，滿足條件的有 <p class="item1">aa</p> 和 <h3 class="item1">bb</h3>，所以 " aa "、" bb " 背景變?yōu)閎lue。