圖片.png
1 .類選擇器和id選擇器都用于對html標(biāo)簽進(jìn)行css樣式設(shè)置，但用于不同場景粟瞬。
| 相同點(diǎn) | 不同點(diǎn) |
|---|---|
| 可以應(yīng)用于任何元素 | ID選擇器只能在文檔中使用一次，類選擇器可以使用多次。 |
2 . css選擇器常見的有一下幾種：
| 類型 | 例子 |
|---|---|
| 類選擇器 | .{ }; |
| id選擇器 | #{ }懊纳； |
| 標(biāo)簽選擇器 | p{ }; |
| 通用選擇器 | *{ }； |
| 偽類選擇器 | a:hover{ }舔庶； |
| 組合選擇器 | E F{ }; E,F{ };等 |
| 屬性選擇器 | E[atter]; |
| 為元素選擇器 | E::first-line; |
注：以上只是簡單羅列幾種常見的選擇器白胀，選擇器還有很多種，比如偽類選擇器和通用選擇器、組合選擇器有好幾種扒寄，這里只列舉一種鱼鼓。
3 . 選擇器的優(yōu)先級是這樣的
如果多條規(guī)則作用于同一個(gè)元素上，且定義的相同屬性的不同值该编，比如
<style>
#test {color: #666;}
p {color: #333;}
</style>
<p id="text">Text</p>
這種場景下迄本，p元素文本顏色應(yīng)該是哪個(gè)呢？
從高到低分別是：
在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
id選擇器
類選擇器
偽類選擇器
屬性選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義
對于復(fù)雜場景選擇器的優(yōu)先級
行內(nèi)樣式 <div style="xxx"></div> ==> a
ID 選擇器 ==> b
類课竣，屬性選擇器和偽類選擇器 ==> c
標(biāo)簽選擇器嘉赎、偽元素 ==> d
4 . a:link,a:hover,a:active,a:visided選擇器的順序是根據(jù)實(shí)際需求來排布的，不同的排布方式產(chǎn)生的效果是不一樣的于樟。
a:link----正常狀態(tài)（默認(rèn)狀態(tài)）下的屬性公条；
a:hover----鼠標(biāo)滑過時(shí)的屬性；
a:active------鼠標(biāo)點(diǎn)擊時(shí)的屬性迂曲；
a:visided-----訪問后的屬性靶橱。
正確的順序是： a:link、a:visited路捧、a:hover关霸、a:active。
5 . 以下選擇器是什么意思杰扫？
圖片.png
| 代碼 | 選擇器類型 |
|---|---|
| #header{} | id選擇器队寇，id=header |
| .header{} | class選擇器，class=header |
| .header .logo{} | class組合選擇器,class=header,class=logo |
| .header.mobile{} | class組合選擇器章姓，class=header佳遣，class=mobile |
| .header p, .header h3{} | 多元素選擇器.header的子元素p和h3 |
| #header .nav>li{} | 子元素選擇器，#header和.nav的所有直接子元素li |
| #header a:hover{} | 后代選擇器凡伊，#header的所有后代a:hover |
| #header .logo~p{} | 統(tǒng)計(jì)選擇器苍日，#header和.logo后的所有普通相鄰元素 |
| #header input[type="text"]{} | 屬性選擇器，匹配所有具有type=“text”屬性的元素 |
列出你知道的偽類選擇器：
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配作為長子（第一個(gè)子女）的元素E |
| 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)前選中的元素 |
div:first-child相恃、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
| div:first-child | 匹配父元素下笨觅，作為第一個(gè)子元素的div元素 |
|---|---|
| div :first-child | 匹配所有div元素內(nèi)所有元素中屬于其父元素的首個(gè)子元素 |
| div:first-of-type | 匹配父元素的子元素中拦耐，第一個(gè)div元素 |
| div :first-of-type | 匹配所有div元素內(nèi)所有元素中屬于其父元素的首個(gè)類型的子元素 |
first-child必須是div的第一個(gè)子元素，且符合指定的類型才可被選中见剩；first-of-type首先div下的子元素要符合類型杀糯，其次要是類型中的第一個(gè)才可以被選中。
運(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>
圖片.png
如上圖所示狼纬，.item:first-child{color： red；}表示對class為item1的第一個(gè)子元素添加紅色骂际，而class item1的第一個(gè)子元素aa,所以aa變?yōu)榧t色疗琉；.item:first-of-type{background： blue；}表示對class下的子元素中的不同類型的第一個(gè)添加樣式歉铝，aa和bb都是不同類型的第一個(gè)盈简，而ccc是h3標(biāo)簽的第二個(gè)元素所以沒有被選中，只有aa和bb的背景變成了藍(lán)色太示。
