一捶朵、id 和 class的使用場(chǎng)景?

#id id選擇器，匹配特定id的元素

 #id-selector{
    color: #333;
  }

.class  類選擇器昂灵，匹配class包含(不是等于)特定類的元素
 .class-selector{
    background: #ccc;
  }

• id定位于頁(yè)面上的唯一的元素
  頁(yè)面上的元素是獨(dú)一無二的就可以起名字為id色鸳，一個(gè)頁(yè)面上不要出現(xiàn)相同
  id的兩個(gè)元素，這樣是不符合HTML規(guī)范的

• class定位于頁(yè)面上的某一類元素
  頁(yè)面上有些元素有某些共同的特征,我們可以加同一個(gè)class
  這個(gè)元素有個(gè)別的特征坠七，我們?cè)偌右粋€(gè)class

二水醋、CSS選擇器常見的有幾種?

基礎(chǔ)選擇器

|選擇器 | 含義 |
| --- | --- | --- |
|* |通用元素選擇器，匹配頁(yè)面任何元素（這也就決定了我們很少使用）|
|#id |id選擇器彪置，匹配特定id的元素|
|.class |類選擇器拄踪，匹配class包含(不是等于)特定類的元素|
|element |標(biāo)簽選擇器|

組合選擇器

|選擇器| 含義|
| --- | --- | --- |
|E,F |多元素選擇器，用,分隔拳魁，同時(shí)匹配元素E或元素F|
|E F| 后代選擇器惶桐，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F|
|E>F| 子元素選擇器姚糊，用>分隔贿衍，匹配E元素的所有直接子元素|
|E+F |直接相鄰選擇器，匹配E元素之后的相鄰的同級(jí)元素F|
|E~F| 普通相鄰選擇器（弟弟選擇器）叛拷，匹配E元素之后的同級(jí)元素F（無論直接相鄰與否）
|.class1.class2| id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符舌厨，. 和 # 本身充當(dāng)分隔符的元素|
|element#id| id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素|

屬性選擇器

| 選擇器| 含義|
| --- | --- | --- |
| E[attr]| 匹配所有具有屬性attr的元素忿薇，div[id]就能取到所有有id屬性的div|
| E[attr = value]| 匹配屬性attr值為value的元素裙椭，div[id=test],匹配id=test的div|
| E[attr ~= value]| 匹配所有屬性attr具有多個(gè)空格分隔、其中一個(gè)值等于value的元素|
| E[attr ^= value]| 匹配屬性attr的值以value開頭的元素|
| E[attr $= value]| 匹配屬性attr的值以value結(jié)尾的元素|
| E[attr *= value] | 匹配屬性attr的值包含value的元素|

偽類選擇器

| 選擇器 | 含義|
| --- | --- | --- |
| E:first-child | 匹配元素E的第一個(gè)子元素|
| E:link | 匹配所有未被點(diǎn)擊的鏈接|
| E:visited| 匹配所有已被點(diǎn)擊的鏈接|
| E:active| 匹配鼠標(biāo)已經(jīng)其上按下署浩、還沒有釋放的E元素|
| E:hover | 匹配鼠標(biāo)懸停其上的E元素|
| E:focus| 匹配獲得當(dāng)前焦點(diǎn)的E元素|
| E:lang(c) | 匹配lang屬性等于c的E元素|
| E:enabled | 匹配表單中可用的元素|
| E:disabled | 匹配表單中禁用的元素|
| E:checked | 匹配表單中被選中的radio或checkbox元素|
| E::selection| 匹配用戶當(dāng)前選中的元素|
| 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::first-line | 匹配E元素內(nèi)容的第一行|
|E::first-letter| 匹配E元素內(nèi)容的第一個(gè)字母|
|E::before | 在E元素之前插入生成的內(nèi)容|
|E::after| 在E元素之后插入生成的內(nèi)容|

三捣域、選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)啼染？

CSS優(yōu)先級(jí)

從高到低分別是

在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
id選擇器
類選擇器
偽類選擇器
屬性選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義

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

  #test p.class1 {...}
  #test .class1.class2 {...}
行內(nèi)樣式 <div style="xxx"></div> ==> a
ID 選擇器 ==> b
類，屬性選擇器和偽類選擇器 ==> c
標(biāo)簽選擇器焕梅、偽元素 ==> d

• 先比較a值的大小迹鹅，a值大的則優(yōu)先級(jí)高;如果a值相等，則再比較b值的大小贞言，b值大的優(yōu)先級(jí)高斜棚；如果b值相等，則比較c值的大小蜗字，c值大的優(yōu)先級(jí)高打肝；如果c值相等，則比較d值的大小挪捕，d值大的優(yōu)先級(jí)高.

四、a:link, a:hover, a:active, a:visited 的順序是怎樣的争便？ 為什么级零？

樣式覆蓋順序是a:link-->a:visited-->a:hover-->a:active.
在元素優(yōu)先級(jí)一樣的情況下，為了實(shí)現(xiàn)顯示結(jié)果，在樣式覆蓋上要遵循的順序奏纪。
a:link 匹配所有未被點(diǎn)擊的鏈接
a:visited 匹配所有已被點(diǎn)擊的鏈接
a:hover 匹配鼠標(biāo)懸停其上的E元素
a:active 匹配鼠標(biāo)已經(jīng)其上按下鉴嗤、還沒有釋放的E元素

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

#header{} id選擇器序调，匹配id值為header的元素
.header{} class選擇器醉锅，匹配class為header的元素
.header .logo{} 后代選擇器，class選擇器為header发绢，匹配header元素所有后代中的logo元素
.header.mobile{} class為header和class為mobile的元素
.header p, .header h3{} class為header的選擇器硬耍，同時(shí)匹配元素p或h3，
#header .nav>li{} id為header的元素边酒，匹配class為nav的所有直接子元素li
#header a:hover{} id為header的元素下经柴，匹配在a鏈接上時(shí)，鼠標(biāo)懸停其上的狀態(tài)
#header .logo~p{} id為header的元素下的墩朦，class為logo的子元素坯认，匹配同級(jí)元素p
#header input[type="text"]{} 在id為header的選擇器下，去匹配屬性值為text的元素

六氓涣、列出你知道的偽類選擇器

| 選擇器 | 含義|
| --- | --- | --- |
| E:first-child | 匹配元素E的第一個(gè)子元素|
| E:link | 匹配所有未被點(diǎn)擊的鏈接|
| E:visited| 匹配所有已被點(diǎn)擊的鏈接|
| E:active| 匹配鼠標(biāo)已經(jīng)其上按下牛哺、還沒有釋放的E元素|
| E:hover | 匹配鼠標(biāo)懸停其上的E元素|
| E:focus| 匹配獲得當(dāng)前焦點(diǎn)的E元素|
| E:lang(c) | 匹配lang屬性等于c的E元素|
| E:enabled | 匹配表單中可用的元素|
| E:disabled | 匹配表單中禁用的元素|
| E:checked | 匹配表單中被選中的radio或checkbox元素|
| E::selection| 匹配用戶當(dāng)前選中的元素|
| 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)|

七缆毁、div:first-child和div:first-of-type的作用和區(qū)別

div:first-child：匹配在div元素下的第一個(gè)子元素
div:first-of-type：匹配在div元素下的使用同一種標(biāo)簽的第一個(gè)子元素
區(qū)別：在div元素下的第一個(gè)子元素，只會(huì)有一個(gè)到涂；而在div元素下使用的標(biāo)簽的卻可以有很多脊框，當(dāng)標(biāo)簽不是第一個(gè)子元素時(shí)，但是另一種的標(biāo)簽践啄，也是可以匹配的浇雹，這樣就導(dǎo)致不同的顯示結(jié)果。

八：運(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>

運(yùn)行結(jié)果：

Paste_Image.png

• aa顏色為紅色:.item1:first-child的顏色為red，在元素為ct下的第一個(gè)元素是aa,
• aa,bb的背景色為藍(lán)色，cc沒有：因?yàn)?item1:first-of-child的意思在ct元素下的同種元素被匹配烂完，而只會(huì)有p和第一個(gè)h3中的元素匹配试疙，所以ccc背景色沒有匹配上