偽類選擇器? 常用有這些：
1，鼠標(biāo)點(diǎn)擊元素的4種狀態(tài) 愛(ài)恨離別（link visited hover active） 前面的2個(gè)只適用于
a標(biāo)簽，后面的2個(gè)適用于其他標(biāo)簽。順序不能改變
2，列表中先選擇誰(shuí)就選擇誰(shuí)?
????????????first-child? 選擇開頭
?????????????last-child 選擇結(jié)尾
????????????nth-child（odd或者enen或者自定義數(shù)值） 選擇偶數(shù)或者奇數(shù)或者自定義行
3，當(dāng)一個(gè)容器只有一個(gè)值就生效的選擇器 only-child 只愛(ài)一個(gè)人 多了就不生效了
4，當(dāng)容器除讓她以外 其他都匹配到? not（她）? 一個(gè)好的前任就應(yīng)該更死了一樣
5，當(dāng)容器里面的元素為空的時(shí)候 就生效 empty
6，當(dāng)元素獲得焦點(diǎn)的時(shí)候，就生效 focus? 這個(gè)很常用 也很實(shí)用 通常用于用戶輸入的對(duì)話框
7，作為單選和復(fù)選修改樣式的時(shí)候 checked
偽元素（對(duì)象）選擇器
有befor 和alter??
他們常用于給列表前后添加各種樣式的美化效果
也是用于給標(biāo)題前后添加美化效果
目錄
一，偽類選擇器
一，鼠標(biāo)點(diǎn)擊的四種狀態(tài) link visited hover active
第一種 link? 鼠標(biāo)訪問(wèn)之前的顏色??
第二種，visited 鼠標(biāo)訪問(wèn)之后的顏色
第三種，鼠標(biāo)滑過(guò)去的顏色
第四種，鼠標(biāo)按住不動(dòng)的狀態(tài)
?編輯
二，列表中想選擇誰(shuí)就選擇誰(shuí)? first-child last-child nth-child（n）
第一種frist-child
? 第二種 last-child
第三種，選擇列表偶數(shù)或者奇數(shù)或者任意一個(gè)
三，只有一個(gè)子元素的時(shí)候才會(huì)生效 only-child
四，里面沒(méi)有任何元素，他就生效，有了子元素他就不生效 emply
五，除了被not選中的，其他都生效
六，焦點(diǎn)選擇器，誰(shuí)被鼠標(biāo)點(diǎn)中，獲得焦點(diǎn)，誰(shuí)就生效 focus
??編輯
?七，單選和復(fù)選框增強(qiáng)效果選擇器 checked
二，偽對(duì)象選擇器? before alter
三，總結(jié)
一，偽類選擇器
一，鼠標(biāo)點(diǎn)擊的四種狀態(tài) link visited hover active
注意link 和visited 僅僅限于超級(jí)連接 a標(biāo)簽
第一種 link? 鼠標(biāo)訪問(wèn)之前的顏色??
修改超鏈接 鼠標(biāo)點(diǎn)擊之前的顏色
a:link{
color: #fa4d15;
}第二種，visited 鼠標(biāo)訪問(wèn)之后的顏色
/*修改點(diǎn)擊之后的顏色*/
a:visited{
color: yellow;
}第三種，鼠標(biāo)滑過(guò)去的顏色
/* 鼠標(biāo)懸停上面的顏色*/
a:hover{
color: dimgray;
}第四種，鼠標(biāo)按住不動(dòng)的狀態(tài)
/* 鼠標(biāo)點(diǎn)擊但是不松手的狀態(tài)*/
a:active{
color: yellowgreen;
}全部代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽類選擇器</title>
<!-- 偽類選擇器
示例 比如a標(biāo)簽有4個(gè)狀態(tài) 訪問(wèn)之前 的顏色 訪問(wèn)過(guò)后的 鼠標(biāo)放在標(biāo)簽上的 鼠標(biāo)點(diǎn)擊但是不松手的
link 訪問(wèn)之前的
visited 點(diǎn)擊之后的顏色
hover 鼠標(biāo)懸停上面的顏色
active 鼠標(biāo)點(diǎn)擊但是不松手的狀態(tài)
必須按照順序來(lái)的 l v h a
-->
<style>
/*<!-- 修改訪問(wèn)之前的顏色 -->*/
a:link{
color: #fa4d15;
}
/*修改點(diǎn)擊之后的顏色*/
a:visited{
color: yellow;
}
/* 鼠標(biāo)懸停上面的顏色*/
a:hover{
color: dimgray;
}
/* 鼠標(biāo)點(diǎn)擊但是不松手的狀態(tài)*/
a:active{
color: yellowgreen;
}
/* 點(diǎn)擊和點(diǎn)擊后的顏色 只要a這種可以點(diǎn)擊生效 其他的對(duì)所有標(biāo)簽都生效*/
/* 鼠標(biāo)懸停上面的顏色*/
p:hover{
color: dimgray;
}
/* 鼠標(biāo)點(diǎn)擊但是不松手的狀態(tài)*/
p:active{
color: yellowgreen;
}
/* 看看input的效果 同樣，前面的2個(gè)不生效 只是后面的2個(gè)生效*/
/* 鼠標(biāo)懸停上面的顏色*/
input:hover{
color: dimgray;
}
/* 鼠標(biāo)點(diǎn)擊但是不松手的狀態(tài)*/
input:active{
color: yellowgreen;
}
</style>
</head>
<body>
<a >百度</a>
<p>我也來(lái)看看有沒(méi)有這個(gè)效果</p>
<form action="https://www.baidu.com/">
<input type="submit">
</form>
</body>
</html>
二，列表中想選擇誰(shuí)就選擇誰(shuí)? first-child last-child nth-child（n）
第一種frist-child
選擇列表的第一個(gè)
/*<!-- first-child是讓其第一個(gè)生效 -->*/
ul li:first-child{
color: #fa4d15;
}? 第二種 last-child
選擇列表的最后一個(gè)
/*last-child 是讓最后一個(gè)生效*/
ul li:last-child{
color: yellow;
}第三種，選擇列表偶數(shù)或者奇數(shù)或者任意一個(gè)
/*自定義 想選擇誰(shuí)就選擇誰(shuí) 也可以是統(tǒng)一選擇偶數(shù)或者奇數(shù)*/
/*odd奇數(shù) envn是偶數(shù)*/
ul li:nth-child(odd){
color: yellowgreen;
}
ul li:nth-child(even){
color: pink;
}
/*定義指定 想讓誰(shuí)變色就讓誰(shuí)變色*/
ul li:nth-child(4){
color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first-child選擇器</title>
<style>
/*<!-- first-child是讓其第一個(gè)生效 -->*/
ul li:first-child{
color: #fa4d15;
}
/*last-child 是讓最后一個(gè)生效*/
ul li:last-child{
color: yellow;
}
/*自定義 想選擇誰(shuí)就選擇誰(shuí) 也可以是統(tǒng)一選擇偶數(shù)或者奇數(shù)*/
/*odd奇數(shù) envn是偶數(shù)*/
ul li:nth-child(odd){
color: yellowgreen;
}
ul li:nth-child(even){
color: pink;
}
/*定義指定 想讓誰(shuí)變色就讓誰(shuí)變色*/
ul li:nth-child(4){
color: red;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表9</li>
<li>列表10</li>
</ul>
</body>
</html>
三，只有一個(gè)子元素的時(shí)候才會(huì)生效 only-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-child</title>
<!-- only-child 僅僅有一個(gè)子元素
-->
<style>
/*<!-- 當(dāng)一個(gè)容器僅僅只有一個(gè)元素的時(shí)候 才會(huì)生效 -->*/
div p:only-child{
color: #ffcccc;
}
</style>
</head>
<body>
<div>
<p>我是唯一一個(gè)p標(biāo)簽</p>
</div>
<!--以上第二個(gè)就沒(méi)生效-->
<div>
<p>我是大哥</p>
<p>我是二哥</p>
</div>
</body>
</html>
四，里面沒(méi)有任何元素，他就生效，有了子元素他就不生效 emply
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>empty選擇器</title>
<!-- empty
里面沒(méi)有任何子元素到時(shí)候 她就生效 有了子元素他就不生效-->
<style>
p{
/*沒(méi)有文本的時(shí)候 p是不生效的，line-height 是設(shè)置文本高度的 */
height: 30px;
line-height: 30px;
/*background-color: #ffcccc;*/
}
/* 當(dāng)文本內(nèi)容為空的時(shí)候 ，這個(gè)選擇器就生效了 包括文本節(jié)點(diǎn) 空格等都算 必須是None*/
p:empty{
background-color: red;
}
</style>
</head>
<body>
<!--我們創(chuàng)造了3個(gè)文本-->
<p></p>
<p><span>我是p里里面的span</span></p>
<p>有文字</p>
</body>
</html>
五，除了被not選中的，其他都生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not選擇器</title>
<!-- not選擇器
除了這個(gè) 其他都選擇-->
<style>
/*<!-- not 里面加了p 表示除了p以外 其他都生效 注意div后面需要空格一下-->*/
div :not(p){
color: #ffcccc;
}
</style>
</head>
<body>
<div>
<p>我是p</p>
<a href="#">我是a</a>
<span>我是span</span>
</div>
</body>
</html>
六，焦點(diǎn)選擇器，誰(shuí)被鼠標(biāo)點(diǎn)中，獲得焦點(diǎn)，誰(shuí)就生效 focus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>focus焦點(diǎn)</title>
<!-- 焦點(diǎn)選擇器 誰(shuí)獲得鼠標(biāo)焦點(diǎn) 誰(shuí)就改變顏色-->
<style>
input:focus{
background-color: #ffcccc;
}
</style>
</head>
<body>
<!--通過(guò)設(shè)置4個(gè)對(duì)話框方便觀察-->
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</body>
</html>?
?七，單選和復(fù)選框增強(qiáng)效果選擇器 checked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checked選擇器</title>
<style>
/*<!-- 有了這個(gè)選擇器，當(dāng)選擇誰(shuí)的時(shí)候 誰(shuí)就會(huì)邊寬和邊高 -->*/
input:checked{
width: 30px;
height: 25px;
}
</style>
</head>
<body>
<input type="checkbox" name="a1" value="xue">學(xué)習(xí)
<input type="checkbox" name="a1" value="xue1">學(xué)習(xí)1
<input type="checkbox" name="a1" value="xue2">學(xué)習(xí)2
<input type="radio" name="a2" value="nan">男
<input type="radio" name="a2" value="女">女
</body>
</html>
二，偽對(duì)象選擇器? before alter
可以給標(biāo)題修改美化效果 同時(shí)也能給列表添加效果
代碼中的2個(gè)案例 一個(gè)是給列表前后增加內(nèi)容，一個(gè)是給標(biāo)題前后增加美化效果文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-773523.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽對(duì)象選擇器</title>
<!-- 也被成為偽元素選擇器-->
<!-- 可以在列表前面或者后面添加內(nèi)容
必須要配額和content來(lái)使用
-->
<style>
/*<!-- 在前面添加內(nèi)容 -->*/
ul::before{
content: '我是前面的';
/*對(duì)這條修改內(nèi)容*/
color: #ffcccc;
font-size: 50px;
}
ul:after{
content: '我是后面的內(nèi)容';
/*對(duì)這條修改內(nèi)容*/
color: #fa4d25;
font-size: 12px;
}
/*對(duì)標(biāo)題前面添加特效*/
h3::before{
content: '';
padding-left: 5px;
background-color: #fa4d25;
}
/*給標(biāo)題后面添加特效*/
h3::after{
content: '';
padding-left: 5px;
background-color: #ffcccc;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<h3> 我是標(biāo)題3 </h3>
</body>
</html>
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-773523.html
三，總結(jié)
選擇器分類
1，基礎(chǔ)選擇器： 全局選擇器 元素選擇器 類選擇器 id選擇器 合并選擇器
2，關(guān)系選擇器 后代選擇器 子代選擇器 相鄰兄弟選擇器 通用兄弟選擇器
3，偽類選擇器
鼠標(biāo)點(diǎn)擊狀態(tài)選擇器（4個(gè)狀態(tài)）（愛(ài)恨離別 link visited hover active）
讓列表中任何一個(gè)值 想選誰(shuí)就選誰(shuí)（first-child）
當(dāng)容器只有以一個(gè)值的時(shí)候就生效的選擇器 only-child
當(dāng)容器除了他其他都生效的選擇器 not（她）
當(dāng)標(biāo)簽為空的時(shí)候，就生效的選擇器 empty
當(dāng)標(biāo)簽被獲得焦點(diǎn)，就觸發(fā)各種自定義特效的選擇器 focus
作為單選和復(fù)選 修改樣式的選擇器 checked
4，偽對(duì)象（元素）選擇器 befor 和alter 可以給列表或者系列元素前后添加內(nèi)容 特效等等
到了這里，關(guān)于CSS基礎(chǔ)筆記四，偽類選擇器和對(duì)象選擇器（鼠標(biāo)點(diǎn)擊的四種狀態(tài)，列表自定義選擇，容器只有一個(gè)，除了被選中的其他都有，元素為空的時(shí)候，元素獲得焦點(diǎn)的時(shí)候，單選和復(fù)選增強(qiáng)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
