一、class與id的使用場(chǎng)景
- class
類選擇器揽趾，匹配class包含特定類的元素台汇，可以管控多個(gè)含有相同類的元素； - id
id選擇器篱瞎，匹配特定id的元素苟呐，id是唯一的。
二俐筋、CSS常見選擇器
基礎(chǔ)選擇器
-
#通用元素選擇器掠抬，匹配頁面所有元素； -
#idid選擇器校哎，匹配特定id的元素两波； -
.class類選擇器瞳步，匹配class包含（不是等于）特定類的元素； -
element標(biāo)簽選擇器腰奋，匹配相同的標(biāo)簽单起。
組合選擇器
-
E,F多元素選擇器，用,分隔劣坊，同時(shí)匹配元素E和元素F嘀倒； -
E F后代選擇器，用空格分隔局冰，匹配E元素所有的后代元素F测蘑； -
E>F子元素選擇器，用>分隔康二，匹配E元素的所有直接子元素F碳胳； -
E+F直接相鄰選擇器，匹配E元素之后相鄰的同級(jí)元素F沫勿； -
E~F普通相鄰選擇器挨约，匹配E元素之后所有的同級(jí)元素F（無論直接相鄰與否）； -
.class1.class2匹配同時(shí)有class1和class2的元素产雹，class1和class2直接沒有分隔诫惭； -
element#id匹配具有id的element元素；
屬性選擇器
-
E[attr]匹配所有具有屬性attr的E元素蔓挖，div[id]就能取到所有有id屬性的div元素夕土； -
E[attr=value]匹配所有attr屬性為value的元素； -
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)點(diǎn)下邪财，還沒釋放的鏈接陕壹； -
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:nth-child(n)匹配E元素的父元素的第n個(gè)子元素九昧，從1開始計(jì)數(shù)，若該元素不是E元素毕匀，則不選擇铸鹰； -
E:nth-last-child(n)匹配E元素的父元素倒數(shù)第n個(gè)子元素，從1開始計(jì)數(shù)皂岔，若該元素不是E元素蹋笼，則不選擇； -
E:nth-of-type(n)匹配E元素的父元素的第n個(gè)E子元素躁垛，從1開始計(jì)數(shù)剖毯，且只計(jì)算E元素； -
E:nth-last-of-type(n)匹配E元素的父元素倒數(shù)的第n個(gè)E子元素教馆，從1開始計(jì)數(shù)逊谋，且只計(jì)算E元素； -
E:first-child匹配E元素的父元素的第一個(gè)元素活玲，若該元素不是E元素涣狗，則不選擇，等同于E:nth-child(1)舒憾； -
E:last-child匹配E元素的父元素倒數(shù)的第一個(gè)元素镀钓，若該元素不是E元素，則不選擇镀迂，等同于E:nth-last-child(1)丁溅； -
E:first-of-type等同于E:nth-of-type(1) -
E:last-of-typeE:nth-last-of-type(1) -
E:only-child匹配其父元素下僅有E這一個(gè)元素的E元素； -
E:only-of-type匹配其父元素下僅有E這一個(gè)元素的標(biāo)簽的E元素探遵； -
E::first-line匹配E元素內(nèi)容的第一行窟赏； -
E::first-letter匹配E元素內(nèi)容的第一個(gè)字母； -
E::before在E元素之前插入生成的內(nèi)容箱季；
<q>一些引用</q>, 他說, <q>比沒有好涯穷。</q>.
q::before {
content: "?";
color: blue;
}
-
E::after在E元素之后插入生成的內(nèi)容；
<q>一些引用</q>, 他說, <q>比沒有好藏雏。</q>.
q::after {
content: "?";
color: red;
}
三拷况、選擇器的優(yōu)先級(jí)
從高到低分別是：
- 屬性后面使用
!important會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式； - 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式掘殴；
- id選擇器赚瘦；
- 類選擇器；
- 偽類選擇器奏寨；
- 屬性選擇器起意；
- 標(biāo)簽選擇器；
- 通配符選擇器病瞳；
- 瀏覽器自定義揽咕。
復(fù)雜場(chǎng)景下的比較
通過比較標(biāo)簽數(shù)悲酷，先比較最高優(yōu)先級(jí)的標(biāo)簽數(shù)，數(shù)量多的優(yōu)先級(jí)高亲善，若最高優(yōu)先級(jí)的標(biāo)簽數(shù)相同舔涎，比較次一級(jí)的標(biāo)簽數(shù)，以此類推逗爹。
四亡嫌、a:link, a:hover, a:active, a:visited的順序
這四個(gè)選擇器優(yōu)先級(jí)相同，考慮到a:visited靠下面的話掘而，會(huì)覆蓋上面的a:hover, a:active挟冠，因此，合理的順序如下：
a:link{}
a:visited{}
a:hover{}
a:active{}
五袍睡、以下選擇器分別是什么意思知染？
#header{}
/*選擇id為header的元素*/
.header{}
/*選擇class為header的元素*/
.header .logo{}
/*選擇class為header的元素中，class為logo的后代元素*/
.header.mobile{}
/*選擇class包含header和mobile的元素*/
.header p, .header h3{}
/*選擇class為header的元素中后代p元素和h3元素*/
#header .nav>li{}
/*選擇id為header的元素中斑胜，class為nav的元素的后代li元素*/
#header a:hover{}
/*選擇id為header的元素中控淡，后代a元素的hover狀態(tài)*/
#header .logo~p{}
/*選擇id為header的元素中，class為logo的后代元素之后所有的p元素*/
#header input[type="text"]{}
/*選擇id為header的元素中止潘，input標(biāo)簽中type屬性為text的元素*/
六掺炭、:first-child和:first-of-type
-
E:first-child匹配E元素的父元素的第一個(gè)元素，若該元素不是E元素凭戴，則不選擇涧狮； -
E:first-of-type匹配E元素的父元素的第一個(gè)E子元素；
七么夫、解析下面代碼
<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{color: red;}選擇了其父元素第一個(gè)class為item的子元素者冤，并將其顏色定為紅色，因此aa顯示為紅色档痪； -
.item1:first-of-type{background: blue;}選擇了其父元素下不同標(biāo)簽中第一個(gè)class為item的子元素涉枫，并將其背景顏色定為藍(lán)色，因此p標(biāo)簽和h3標(biāo)簽的第一個(gè)元素的背景色為藍(lán)色腐螟。
