class和id的使用場(chǎng)景
id：適用與指定元素
class：適用與多個(gè)有共同樣式的元素
CSS常見(jiàn)選擇器
基礎(chǔ)選擇器
-
*通用選擇器 -
#idid選擇器 -
.classclass選擇器 -
element類(lèi)選擇器
組合選擇器
-
E,F多元素選擇器寺酪，同時(shí)匹配元素E或元素F -
E F后代選擇器秉剑，匹配E元素的所有后代F -
E>F子元素選擇器蛉迹，匹配E元素的所有子元素F -
E+F直接相鄰選擇器杭隙，匹配E元素之后的相鄰的同級(jí)元素F -
E~F普通相鄰選擇器，匹配E元素之后的同級(jí)元素F（無(wú)論直接相鄰與否）
屬性選擇器
-
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開(kāi)頭的元素 -
E[attr $=value]匹配屬性attr的值以value結(jié)尾的元素 -
E[attr *=value]匹配屬性attr的值包含value的元素
選擇器的優(yōu)先級(jí)計(jì)算
簡(jiǎn)單場(chǎng)景
- 在屬性后面有
锅纺！important時(shí)薪缆，優(yōu)先級(jí)最高 - 作為style屬性寫(xiě)的內(nèi)聯(lián)樣式
- id選擇器
- 類(lèi)選擇器
- 偽類(lèi)選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器的自定義
復(fù)雜選擇器
- 行內(nèi)樣式 ==>a
- ID選擇器 ==>b
- 類(lèi)、屬性選擇器和偽類(lèi)選擇器 ==>c
- 標(biāo)簽選擇器伞广、偽元素 ==>d
從上到下，優(yōu)先度以此降低疼电。
a:link嚼锄、a:hover、a:active蔽豺、a:visited的使用順序
a:link{
color: blue;
}
a:visited{
color: red;
}
a:hover{
color: green;
}
a:active{
color: yellow;
}
a首先是一個(gè)沒(méi)點(diǎn)擊過(guò)的鏈接（a:link)区丑，當(dāng)鼠標(biāo)放在a鏈接上(a:hover)，再點(diǎn)擊(a:active)修陡，點(diǎn)擊后即為已訪問(wèn)過(guò)的鏈接(a:visited)沧侥。
樣式層層覆蓋。
常見(jiàn)的偽類(lèi)選擇器
-
E:first-child匹配元素E的第一個(gè)子元素 -
E:link匹配所有未被點(diǎn)擊過(guò)的鏈接E -
E:visited匹配所有已被點(diǎn)擊過(guò)的鏈接E -
E:active匹配鼠標(biāo)已按下且未釋放的E元素 -
E:hover匹配鼠標(biāo)懸停其上的元素E -
E:focus匹配獲得當(dāng)前焦點(diǎn)的元素E -
E:lang(c)匹配lang屬性等于c的元素E -
E:enabled匹配表單中可用的元素 -
E:disabled匹配表單中禁用的元素 -
E:cheked匹配表單中被選中的radio或checkbox元素 -
E:selection匹配用戶(hù)當(dāng)前選中的元素 - 更多選擇器
p:first-child和p:first-of-type的作用和區(qū)別
-
p:first-child父元素下第一個(gè)且為p的元素
<style>
p:first-child{
color:red;
}
</style>
<div>
<p>第一個(gè)元素——p</p> 字體為紅
<div>第二個(gè)元素——div</div> 字體為黑
</div>
<div>
<div>第一個(gè)元素——div</div> 字體為黑
<p>第二個(gè)元素———p</p> 字體為黑
</div>
-
p:first-of-type父元素下第一個(gè)p元素
p:first-of-type{
color:red;
}
<div>
<p>第一個(gè)元素——p</p> 字體為紅
<div>第二個(gè)元素——div</div> 字體為黑
</div>
<div>
<div>第一個(gè)元素——div</div> 字體為黑
<p>第二個(gè)元素———p</p> 字體為紅
</div>
問(wèn)題1
#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的元素下所有l(wèi)i元素*/
#header a:hover{
}/*id為header下所有鼠標(biāo)在其上方的a元素*/
#header .logo~p{
}/*id為header下所有class為logo后所有同級(jí)的p元素*/
#header input[type="text"]{
}/*id為header下所有input標(biāo)簽中有type屬性為text的元素*/
問(wèn)題2
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>/*該元素即是.ct中第一個(gè)元素宴杀，也是.ct中第一個(gè)p元素，所以它即是紅字也是藍(lán)背景*/
<h3 class="item1">bb</h3>/*該元素是.cd中的第二個(gè)元素拾因，但是卻是第一個(gè)h3元素旺罢，所以它僅是背景為藍(lán)色*/
<h3 class="item1">ccc</h3>/*該元素是.cd中的第三個(gè)元素旷余，也是第二個(gè)h3元素，所以它的樣式是瀏覽器的默認(rèn)樣式*/
</div>
