?目錄
前言
偽類選擇器
狀態類
結構類
?偽元素選擇器
屬性選擇器?
前言
? ? ? ? 前面我們學習了CSS中的相關選擇器（鏈接html&CSS-----CSS選擇器（上）_灰勒塔德的博客-CSDN博客? ? html&CSS-----CSS選擇器（下）_灰勒塔德的博客-CSDN博客）今天我們接著學習比較高級的選擇器，下面就一起來去看看吧！
偽類選擇器
當你希望元素在特定的狀態下發生樣式的變化時，可以使用偽類選擇器。
-
狀態類
寫法 介紹 舉例 :hover 鼠標懸停 a:hover{color:pink;} :link 未被訪問的鏈接（特指a標簽） a:link{color:red}; :visited 被訪問過的鏈接（特指a標簽） a:visited{color:blue;} :active 被點擊按下狀態 a:active{color:green;}
?
:hover:active不僅僅能用在a標簽上。
:hover最為常用最為重要。可以進一步在偽類后進行選擇，比如：
#wrap:hover .nav{display:none;
| 寫法 | 介紹 | 舉例 |
|---|---|---|
| :focus | 獲得焦點狀態(接收鍵盤事件或其他用戶輸入的元素都允許 :focus 選擇器。) | input:focus{border:1px solid blue;} |
| :checked | （單選/多選）表單被勾選狀態 | input:checked{background-color:#aaa;} |
?下面看個示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{font-size: 30px;}.first ul li:hover{color: violet;}.second a:link{/* 這里可以改變未被訪問時的a標簽顏色（樣式） */color: red;}.third{color: green;}.forth:active{color: blue;}</style>
</head>
<body><!-- :hover選擇器 --><div class="first"><ul><li>《Re:從零開始的異世界生活》</li><li>《來著新世界》</li><li>《紫羅蘭永恒花園》</li></ul></div><!-- :link選擇器 --><div class="second"><a href="www.baidu.com">訪問百度</a></div><!-- :visited選擇器 --><div class="third"><a href="www.baidu.com" target="_blank">訪問baidu</a></div><!-- :active選擇器 --><div class="forth">點我變顏色，看看吧</div>
</body>
</html>?效果如下：
1691821211078
結構類
| 寫法 | 介紹 | 舉例 |
|---|---|---|
| E:nth-child(n) | 這個表示選擇列表中的倒數第n個標簽 | p:nth-child(2){color:red;} |
| E:nth-of-type(n) | E元素父級的第n個E元素，無視其他元素 | p:nth-of-type(2){color:red;} |
| E:first-child | E元素父級的第一個子元素（該子元素需要滿足E的選擇規則，不滿足則不會選中任何元素） | p:first-child{color:red;} |
| E:last-child | E元素父級的最后一個子元素（該子元素需要滿足E的選擇規則，不滿足則不會選中任何元素） | p:last-child{color:red;} |
上述選擇器 n 所表示的可以是一個 數字 或者 奇數odd 或者 偶數even 或者 一個表達式。
?
:nth-child(n):nth-of-type(n)有對應的“倒著數”屬性:nth-last-child(n):nth-last-of-type(n)。
?下面看個示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{font-size: 30px;}ul li:first-child{color: red;}ul li:last-child{color: red;}</style>
</head>
<body><ul><div>start</div><li>1</li><li>2</li><li>3</li><!-- <div>end</div> --></ul>
</body>
</html>效果：
?這里要注意first-child和last-child這兩個選擇器的使用，因為這里作用的標簽必須是父類元素的第一個或者最后一個，否則不起效果，如上所示。
?偽元素選擇器
偽類選擇器相當于在某種情況下添加一個虛擬類名，而偽元素選擇器則是相當于創建了一個虛擬元素。
| 寫法 | 介紹 | 舉例 |
|---|---|---|
| E::before | 相當于在E元素的最前面添加一個額外的子元素 | #wrap::before{content:"Hello World!"} |
| E::after | 相當于在E元素的最后面添加一個額外的子元素 | #wrap::after{content:"Hello World!"} |
必須擁有
content樣式，上述兩個偽元素才會生效。創建的子元素是一個行內元素。
::after常用來清除浮動。
content除了寫文字之外，還可以用url指定一張圖片等其他寫法。
/* 消除浮動自適應問題的寫法 */E::after{content: '';display: block;clear: both; }屬性選擇器?
這一類選擇器跟正則匹配搭配使用，實際上并不是怎么用到，比較少用的那種，我們可以去選擇性的去使用?
| [attr] | 屬性選擇器（擁有attr標簽屬性） | [title]{ color:red; } |
| [attr=val] | 屬性選擇器（擁有標簽屬性attr并值為val） | [target=_blank]{ color:red; } |
| [attr*=val] | 屬性選擇器（擁有標簽屬性attr并值包含val） | [src*=baidu]{border:5px solid pink;} |
| [attr$=val] | 屬性選擇器（擁有標簽屬性attr并值以val結尾） | [src~=jpg]{ border:5px solid pink; } |
| [attr^=val] | 屬性選擇器（擁有標簽屬性attr并值以val開頭） | [class^=nav]{ background:pink; } |
| 選擇規則1選擇規則2 | 復合選擇器（多個規則來匹配元素） | div.nav.left{ width:100px; } 有nav和left類名的div標簽 |
?下面看個示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{font-size: 30px;}/* 這里匹配到的是含有o字母的選擇器 */div[class*='o']{color: blueviolet;}</style>
</head>
<body><div class="hhh">哈嘍哦</div><div class="food">吃飯了嗎</div><div class="look">快看快看</div>
</body>
</html>效果：
?好了，以上就是今天的全部內容了，我們下一期再見！
分享一張壁紙：
 】- 智能硬件設備開發)
)
——文件操作)