CSS選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS選擇器</title>
<style type="text/css">
/*選擇器*/
/*標(biāo)簽選擇器，需要修改哪個(gè)標(biāo)簽的樣式，就可以用標(biāo)簽名{}這種方式來(lái)修改。
標(biāo)簽選擇器里的樣式會(huì)改變所有這種類型的標(biāo)簽的樣式*/
div{
color: red;
}
/*ID選擇器（修改某一個(gè)標(biāo)簽的樣式）
1、在需要修改的樣式的標(biāo)簽里面添加id屬性，設(shè)置id
2、在style標(biāo)簽里面通過(guò)#id{}來(lái)修改樣式
注意：一個(gè)標(biāo)簽只能有一個(gè)id
一個(gè)id名只能給一個(gè)標(biāo)簽使用*/
#p1{
background-color: blue;
}
#p2{
background-color: red;
}
/*類選擇器
（給某一類標(biāo)簽添加樣式）
1、給需要修改樣式的標(biāo)簽添加類名。
2、在style標(biāo)簽里面用過(guò)的 .類名{} 修改樣式
注意：一個(gè)標(biāo)簽可以有多個(gè)類名，類名之間用空格隔開(kāi)，一個(gè)類名可以被多個(gè)標(biāo)簽使用。*/
.sp{
color: red;
}
/*后代選擇器
開(kāi)放的過(guò)程中為了避免兩個(gè)人起相同的名，可以在選擇器的前面添加父級(jí)的選擇器用于區(qū)別
后代選擇器只對(duì)整個(gè)選擇器里面的最后一個(gè)選擇器生效*/
#huangtong p{
color: black;
}
#baiyin p{
color: darkcyan;
}
#huangjin p{
color: chartreuse;
}
/*群組選擇器
可以給多個(gè)選擇器同一個(gè)樣式。
多個(gè)選擇器之間使用逗號(hào)隔開(kāi)*/
#huangjin, #huangjin p{
color: cyan;
}
/*通配選擇器*/
*{
background-color: lightcyan;
}
</style>
</head>
<body>
<div>我是一個(gè)div</div>
<p id="p1">你是P</p>
<p id="p2">你還是p</p>
<span class="sp">靴鞋</span>
<span class="sp">箱包</span>
<span class="sp">房產(chǎn)</span>
<div id="huangtong">
<p>段落1</p>
</div>
<div id="baiyin">
<p>段落2</p>
</div>
<div id="huangjin">dsa
<p>段落3</p>
</div>
</body>
</html>
選擇器的優(yōu)先級(jí)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.divF{
font-size: 40px;
color: red;
}
/*同名或者同類型的選擇器
同名的選擇器樣式都會(huì)被添加，出現(xiàn)重復(fù)的樣式的時(shí)候后面會(huì)覆蓋前面的樣式*/
.divF{
font-size: 100px;
}
.divFF{
color:white;
background-color: greenyellow;
}
/*p{
background-color: red;
color: blue;
}
*{
font-size: 55px;
color: greenyellow;
}*/
/*不同類型的選擇器同時(shí)出現(xiàn)的時(shí)候，如果有樣式的沖突，則按權(quán)值來(lái)計(jì)算優(yōu)先級(jí)
1、* 0
2、標(biāo)簽選擇器 1
3、類選擇器 10
4、id選擇器 100
5、style行間樣式 1000
6、！important 10000
6、后代選擇器 看里面的組成*/
div p{
color: blue;
}
#first p{
color: red;
}
</style>
</head>
<body>
<!--<div class="divF divFF">我是一個(gè)div</div>-->
<!--<p>AKL</p>-->
<div id="first">
<p class="pp">p1</p>
</div>
<div id="second">
<p class="pp">p2</p>
</div>
<div>
<div>
<div>
<div>
<p>p3</p>
</div>
</div>
</div>
</div>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
