溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css之偽元素選擇器如何使用”，在日常操作中，相信很多人在css之偽元素選擇器如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css之偽元素選擇器如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
CSS中偽元素選擇器 的是在指定CSS選擇器增加關鍵字。用來描述某個指定元素的特定部分設定樣式。
通過偽元素，開發者不需要借助元素的 ID 或 class 屬性就可以對被選擇元素的特定部分定義樣式。例如通過偽元素您可以設置段落中第一個字母的樣式，或者在元素之前、之后插入一些內容等等。
在 CSS1 和 CSS2 中，偽元素的使用與偽類相同，都是使一個冒號:與選擇器相連。但在 CSS3 中，將偽元素單冒號的使用方法改為了使用雙冒號::，以此來區分偽類和偽元素。因此，建議在使用偽元素時使用雙冒號而不是單冒號。
語法結構如下所示：
/* CSS3 語法 */
選擇器::偽元素 {
屬性 : 屬性值;
}
/* CSS2 過時語法 (僅用來支持 IE8) */
選擇器:偽元素 {
屬性 : 屬性值;
}現在應該都采用兩個冒號的方式，除非你還兼容IE8。
注意：一個選擇器中只能使用一個偽元素，而且偽元素必須緊跟在選擇器之后。按照最新的 W3C 規范，在定義偽元素時您應該使用雙冒號
::而不是單個冒號:，以便區分偽類和偽元素。但由于舊版本的 W3C 規范并未對此進行特別區分，因此目前絕大多數的瀏覽器都同時支持使用單冒號和雙冒號兩種方式來定義偽元素。
CSS 中提供了一系列的偽元素，如下表所示：
| 偽元素 | 例子 | 例子描述 |
|---|---|---|
| ::after | p::after | 在每個 <p> 元素之后插入內容 |
| ::before | p::before | 在每個 <p> 元素之前插入內容 |
| ::first-letter | p::first-letter | 匹配每個 <p> 元素中內容的首字母 |
| ::first-line | p::first-line | 匹配每個 <p> 元素中內容的首行 |
| ::selection | p::selection | 匹配用戶選擇的元素部分 |
| ::placeholder | input::placeholder | 匹配每個表單輸入框（例如 <input>）的 placeholder 屬性 |
::before和::after偽元素
::before 偽元素 的作用是作為定位的HTML元素的第一個子級元素，::after ** 偽元素** 的作用是作為定位的 HTML元素的最后一個子級元素。
如下示例代碼展示了::before和::after偽元素的用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>::before和::after偽元素</title>
<style>
p::before {
content: "?";
}
p::after {
content: "?";
}
</style>
</head>
<body>
<p>這是一段測試內容</p>
</body>
</html>代碼運行結果如下圖所示：
如上述示例代碼所示，::before偽元素和::after偽元素通常會配合content屬性來為該元素增加裝飾內容。
content屬性用于在元素的::before偽元素和::after偽元素中插入內容。該屬性具有的值如下所示：
none：不會產生偽類元素。
normal：::before偽元素和::after偽類元素中會被視為 none。
text：文本內容。
url：格式為url()，指定一個外部資源（比如圖片）。如果該資源或圖片不能顯示，它就會被忽略或顯示一些占位。
::first-letter和::first-line偽元素
::first-letter和::first-line偽元素分別匹配文本的第一個字和第一行的樣式內容。示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>::first-letter和::first-line偽元素</title>
<style>
/* 匹配第一行 */
p::first-line {
background-color: lightcoral;
}
/* 匹配第一個字 */
p::first-letter {
font-size: 130%;
}
</style>
</head>
<body>
<p>我如果愛你——絕不像攀援的凌霄花，借你的高枝炫耀自己；</p>
</body>
</html>代碼運行結果如下圖所示：
值得注意的是::first-letter和::first-line偽元素可以使用的CSS屬性是有限制的。
::first-letter選擇器可以設置的CSS屬性：
font屬性
color屬性
background屬性
margin屬性
padding屬性
border屬性
text-decoration屬性
vertical-align屬性
text-transform屬性
line-height屬性
float屬性
clear屬性
::first-line選擇器可以設置的CSS屬性：
font屬性
color屬性
background屬性
word-spacing屬性
letter-spacing屬性
text-decoration屬性
vertical-align屬性
text-transform屬性
line-height屬性
clear屬性
::selection偽元素
::selection偽元素的作用是匹配用戶在HTML頁面選中的文本內容（比如使用鼠標或其他選擇設備選中的部分）設置高亮效果。如下示例代碼展示了::selection偽元素的用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>::first-letter和::first-line偽元素</title>
<style>
p::selection {
color: gold;
background-color: red;
}
</style>
</head>
<body>
<p>我如果愛你——絕不像攀援的凌霄花，借你的高枝炫耀自己；</p>
</body>
</html>代碼運行結果如下圖所示：
::placeholder偽元素
偽元素 ::placeholder 用來設置表單元素（<input>、<textarea> 元素）的占位文本（通過 HTML 的 placeholder 屬性設置的文本），示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
input.text::placeholder{
color: red;
background-color: #CCC;
}
</style>
</head>
<body>
<input placeholder="請輸入一段文本">未使用偽元素 ::placeholder<br>
<input placeholder="請輸入一段文本" class="text">使用偽元素 ::placeholder 的效果
</body>
</html>代碼運行結果如下圖所示：
到此，關于“css之偽元素選擇器如何使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
