前端css學習筆記3：偽類選擇器與偽元素選擇器

本文為個人學習總結，如有謬誤歡迎指正。前端知識眾多，后續將繼續記錄其他知識點！

前言

一、偽類選擇器

1.概念

2.動態選擇器（用戶交互）

3.結構偽類

：first-child：選擇所有兄弟元素的第一個

：last-child：選擇所有兄弟元素的最后一個

：nth-child（n）：選擇選擇所有兄弟元素的第n個

：first-of-type：所有同類型的兄弟元素的第一個

：last-of-type：所有同類型的兄弟元素的最后一個

：nth-of-type（n）：所有同類型的兄弟元素的第n個

4.否定偽類（作排除）

實際應用場景

(1) 表單控件排除

(2) 導航菜單高亮

(3) 列表樣式控制

(4) 無障礙優化

5.UI選擇器

二、偽元素選擇器

::first-letter

::first-line

::selection

::before

::after

前言

偽類選擇器與偽元素選擇器作為 CSS 中極具特色的兩類選擇器，偽類選擇器專注于選取元素的特殊狀態；偽元素選擇器則著眼于元素內部的特定部分，本文將記錄偽類選擇器和偽元素選擇器的概念、用法、實際應用場景及注意事項，希望這份筆記能為同樣正在學習CSS的同學提供參考，也歡迎大家結合原課程視頻深入學習，共同進步。

網課鏈接： https://www.bilibili.com/video/BV1p84y1P7Z5/?share_source=copy_web&vd_source=faad59aa4025692c65fca19bc4320e39

一、偽類選擇器

1.概念

作用：是選中特殊狀態的元素

2.動態選擇器（用戶交互）

注意順序：link（未連接），visited（已訪問），hover（懸停），active（激活）

對于一個未訪問的超鏈接，處于link，然后鼠標懸浮（hover），點擊激活（active），最后處于已訪問（visited）

visited不能寫在最后，不然，后來者居上，不會出現懸浮和激活狀態（被覆蓋）

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>偽類選擇器</title><style>/* 訪問過a元素，顏色也不會改變<a href="hhtps://www.baidu.com">去百度</a>*//* 前提是a標簽的target屬性是_self，在該頁面跳轉 *//* link和visited是超鏈接特有的 *//* 選中沒有訪問過的a元素 */a:link{color:chocolate;}/* 選中訪問過的a元素 */a:visited{color:grey;}/* 選中鼠標懸浮的a元素 */a:hover{color: cadetblue;}/* 選中激活（鼠標點擊不松手）狀態的a元素 */a:active{color: blue;}/* 這四個有順序：link visited hover active *//* hover與active可以用于其他元素，例如p，span等等 */p:hover{color: blueviolet;}/* 獲取焦點（只有表單元素才能使用focus偽類） */input:focus{/* 輸入文字顏色變成藍色 */color: blue;}select:focus{color: aqua;}</style>
</head>
<body><a  href="https://www.baidu.com" >去百度</a><a href="https://www.jd.com" >去京東</a><br><p>前端</p><!-- 輸入框 --><input type="text"><br><!-- 下拉框 --><select name="age" ><option value="under 18">18以下</option><option value="18-25">18-25歲</option><option value="26-35">26-35歲</option></select>
</body>
</html>

3.結構偽類

-child 基于其父元素的所有子代元素；-of-type 基于其父元素的所有同類型的子代元素

：first-child：選擇所有兄弟元素的第一個

:first-child 偽類與指定的元素匹配：該元素是另一個元素的第一個子元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>結構偽類01</title><style>/* 后代選擇器：選中div后代（兒子，孫子，。。）p元素(在div所有子元素中找)，p元素的父親是誰無所謂，但是p必須是其父親的第一個兒子——結構3 *//* main的p元素變色，它是div的孫子，是后代元素，是第一個 */div p:first-child{color: blue;}/* 選中p元素，p元素的父親是誰無所謂，但是p必須是其父親的第一個兒子——結構3 *//* 同時定義了div p:first-child和p:first-child兩個選擇器，前者具有更高的特異性（因為它更具體），所以即使兩個規則都匹配，藍色的規則會覆蓋紅色的規則。 */p:first-child{color: red;}</style>
</head>
<body><!-- 結構3 --><div><p>開發</p><!-- main表示主要內容 --><main><p>張三：98</p></main><!-- div的第二個子元素 --><p>李四：88</p><p>王五：76</p><p>趙六：68</p></div></body>
</html>

：last-child：選擇所有兄弟元素的最后一個

/* 選中div的最后一個兒子元素（按照所有兄弟計算）——結構1 */div > p:last-child{        color: red;        }<!-- 結構1 --><div>        <p >張三：98</p><p>李四：88</p><p>王五：76</p><p>趙六：68  <span>99</span>  </p></div>

選擇器拆解

div > p----------選擇所有直接子級的 <p> 元素（必須是 <div> 的直接子元素）。

:last-child------------進一步篩選這些 <p> 中的最后一個子元素（相對于其父元素 <div>）

如果 <div> 的最后一個是其他元素（如 <span>），則不會匹配任何 <p>。

：nth-child（n）：選擇選擇所有兄弟元素的第n個

n的取值范圍：0到正無窮

寫0，不選中
寫n，全選中（不用）
2*n，或者even：選中偶數元素
2*n+1，或者odd：選中奇數元素
必須寫

n的取值形式：a*x+b

可以寫數字（a=0），選中單個；但是不要超過兄弟元素個數
可以寫表達式（固定格式a*x+b），進行一定范圍選中
例如，可以寫-n+5，選中前5個（n的值從0開始遍歷，到n為5結束），但是不能寫5-n

 /*選中div的第n個兒子p元素（按照所有兄弟計算）——結構1  */div > p:nth-child(3){color: blue;}

注意：它基于父元素中的所有子元素來計算的，而不僅僅是特定類型的子元素。它會按照子元素的順序進行編號，然后根據選擇器的規則來選擇元素。

nth-child(-n+4) 的意思是選擇父元素中的前 4 個子元素（包括所有類型的子元素，而不僅僅是 <p> 元素

- 第 1 個子元素是 <span>。
- 第 2 個子元素是第一個 <p>（張三）。
- 第 3 個子元素是第二個 <p>（李四）。
- 第 4 個子元素是第三個 <p>（王五）。

因此，nth-child(-n+4) 會選擇這 4 個子元素，但只有其中的 <p> 元素會應用樣式。

希望選擇前 4 個 <p> 元素，而不是前 4 個子元素，應該使用 nth-of-type，而不是 nth-child。

<!-- 選中div的第4,3,2,1個子代p元素（先找子代元素） -->
div > p:nth-child(-n+4){background-color: burlywood;}<div><span>測試</span> <!-- 第一個子代元素 --><p>張三：98</p><p>李四：88</p><p>王五：76</p><p>趙六：68</p>
</div>
<!--在這個結構中，<span> 是第一個子元素，而 <p> 元素是從第二個子元素開始的。  -->

：first-of-type：所有同類型的兄弟元素的第一個

選中div的第一個兒子p元素（按所有同類型的兄弟計算）

選中div的第一個同類型（p元素）的（狀態）子代p元素

：last-of-type：所有同類型的兄弟元素的最后一個

選中div的最后一個兒子p元素（按所有同類型的兄弟計算）

選中div的最后一個同類型（p元素）的（狀態）子代p元素
只找同類型的p元素

：nth-of-type（n）：所有同類型的兄弟元素的第n個

nth-of-type 是基于特定類型的子元素來計算的，而不是所有子元素。

選中div的第n個兒子p元素（按所有同類型的兄弟計算）

選中div的第n個同類型（p元素）的（狀態）子代p元素

選擇器	作用	當前示例匹配結果
`div > p:last-child`	選擇作為父元素最后一個子元素的直接 `<p>`	`<p>趙六：68</p>`
`div p:last-of-type`	選擇父元素內同類型的最后一個 `<p>`	`<p>趙六：68</p>`
`div > p:last-of-type`	同 `:last-of-type` ，但僅限直接子級	`<p>趙六：68</p>`

4.否定偽類（作排除）

作用：排除滿足括號中條件的元素
語法：not（選擇器）{

????????屬性名：屬性值

}

括號里可以是類選擇器，屬性選擇器，id選擇器，結構選擇器等等

實際應用場景

(1) 表單控件排除

/* 為所有非隱藏輸入框添加邊框 */
input:not([type="hidden"]) {border: 1px solid #ccc;
}

(2) 導航菜單高亮

/* 當前頁面菜單項不加粗 */
.nav-item:not(.active) {font-weight: normal;
}

(3) 列表樣式控制

/* 最后一項不加下劃線 */
li:not(:last-child) {border-bottom: 1px solid #eee;
}

(4) 無障礙優化

/* 非禁用按鈕懸停效果 */
button:not([disabled]):hover {background-color: #555;
}

注意事項

不支持嵌套 :not()

/* 無效寫法 */
:not(:not(p)) {}

不能包含偽元素

/* 無效寫法 */
:not(::before) {}

優先級計算
:not() 的優先級由其參數決定。例如：

:not(.class) 的優先級 = 類選擇器（10）
:not(#id) 的優先級 = ID 選擇器（100）

5.UI選擇器

選中就變大，不選中就保持原狀；

focus是選中變大，取消選中不變回原狀

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>/* 選中的是勾選得復選框或者單選框（不能寫顏色的樣式） */input:checked{width: 30px;height: 40px;}/* 選中被禁用的input元素 */input:disabled{background-color:grey;}</style>
</head>
<body><input type="checkbox"><input type="radio" name="gender"><input type="radio" name="gender"><input type="text"><input type="text" disabled>
</body>
</html>