定義
偽元素選擇器:就是有連續兩個冒號的選擇器,如::first-line::first- letter、::before 和::after
- E::first-letter文本的第一個單詞或字(如中文、日文、 韓文等)
- E::first-line 文本第一行;
- E::selection 可改變選中文本的樣式;
- E::before和E::after
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽元素選擇器</title>
<style type="text/css">
p::first-letter { /* 選擇第一個字 */ color: red; font-size: 25px; } p::first-line { /* 選擇第一行 */ color: green; font-size: 20px; } p::selection { /* 選中變色 */ color: blue; } div:before { /* 放在盒子內部的前面 */ content:"一只"; } div:after { /* 放在盒子內部的后面插入 */ content:"豬"; } </style> </head> <body> <h1>靜夜思</h1> <p>床前明月光,疑是地上霜。舉頭望明月,低頭思故鄉</p> <div>特立獨行的</div> </body> </html>
實現效果