選擇器
基本選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*標(biāo)簽選擇器*/biao
span{
color: yellow;
}
div{
color: greenyellow;
}
a{
color: red;
}
1.樣式的繼承:子元素會(huì)繼承父元素的樣式(但是a標(biāo)簽除外)
2.要想對(duì)a標(biāo)簽進(jìn)行樣式設(shè)置,必須直接找到a標(biāo)簽的位置,對(duì)a單獨(dú)設(shè)置
3.樣式之間的重疊部分是有優(yōu)先級(jí)的,繼承下來的樣式的優(yōu)先級(jí)為0(最低)
#div1{
color: aqua;
}
.sp{
color: darkseagreen;
}
通用選擇器:所有的標(biāo)簽都會(huì)被中
*{
color: chocolate;
}
</style>
</head>
<body>
<div id="div1">
wahaha1
<span>我是一個(gè)div1-span</span>
</div>
<span>只有span</span>
<div>
wahaha2
<span class="sp">我是一個(gè)div2-span</span>
<a >這是個(gè)百度鏈接</a>
</div>
</body>
</html>
高級(jí)選擇器
1.后代\子代
后代\子代
后代選擇器:找的是子孫
子代選擇器:只找子代
后代選擇器:div span
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div span{
color: tomato;
}
</style>
</head>
<body>
<div>
我是div標(biāo)簽的content
<span>西紅柿色1</span> /*變色*/
<p>
在div-p標(biāo)簽中
<span>西紅柿色2</span> /*變色*/
</p>
</div>
<span>我只是一個(gè)單純的span標(biāo)簽</span>
</body>
子代選擇器:div>span
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div>span{
color: tomato;
}
</style>
</head>
<body>
<div>
我是div標(biāo)簽的content
<span>西紅柿色1</span> /*變色*/
<p>
在div-p標(biāo)簽中
<span>西紅柿色2</span>
</p>
</div>
<span>我只是一個(gè)單純的span標(biāo)簽</span>
</body>
2.毗鄰+\弟弟~
毗鄰+:
<style>
span+a{
color: tomato;
}
</style>
<div>
<a>我是a0標(biāo)簽</a>
<span>span標(biāo)簽</span>
<a>我是a1標(biāo)簽</a> <!--變色-->
<a>我是a2標(biāo)簽</a>
</div>
弟弟~:
<style>
span~a{
color: tomato;
}
</style>
<div>
<a>我是a0標(biāo)簽</a>
<span>span標(biāo)簽</span>
<a>我是a1標(biāo)簽</a> <!--變色-->
<a>我是a2標(biāo)簽</a> <!--變色-->
</div>
3.屬性選擇器 [屬性]/[屬性="值"]
<style>
/*a[href]{*/
/*color: green;*/
/*}*/
/*a[]{*/
/*color: lightpink;*/
/*}*/
input[type='text']{
background-color: lightblue;
}
</style>
<body>
<div>
<a >我是a0標(biāo)簽</a>
<span>span標(biāo)簽</span>
<a >我是a1標(biāo)簽</a>
<a >我是a2標(biāo)簽</a>
<a>沒有href屬性</a>
</div>
<input type="text">
<input type="password">
</body>
4.并集/交集
并集:
<style>
ul,ol,span{
background-color: gainsboro;
}
</style>
<body>
<ul>
<li>u-first</li>
</ul>
<ol>
<li>o-first</li>
</ol>
</body>
交集選擇器:
<style>
div.box1.box2{
background-color: red;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="box1 box2">box1box2</div>
<div class="box1">box1</div>
<div>aaa</div>
<span class="box1">span標(biāo)簽</span>
</body>
5.偽類選擇器
a : link visited active
input: focus
通用: hover
<style>
a:link{ /*未訪問的超鏈接*/
color:tomato;
}
a:visited{ /*訪問過的超鏈接*/
color: gray;
}
a:active{ /*長(zhǎng)按超鏈接*/
color: green;
}
input:focus{ /*input的背景顏色*/
background-color: aquamarine;
}
div{ /*所有的div背景顏色和尺寸*/
width: 100px;
height: 100px;
background-color: lightgray;
}
div:hover{ /*鼠標(biāo)劃上時(shí)的div中的內(nèi)容*/
background-color: pink;
}
</style>
<body>
<a >京東</a>
<a >?；?lt;/a>
<input type="text">
<div></div>
</body>
6.偽元素選擇器
first-letter
before
after : *****
<style>
p:first-letter{
color: green;
}
p:before{
content: '**';
/*color: pink;*/
}
p:after{
content: '.....';
color: lightblue;
}
</style>
<body>
<div>春江水暖鴨先知</div>
</body>
?著作權(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ù)。
