css偽選擇器學習之偽元素選擇器解析

在之前的文章《》中，我們學習了4種層級選擇器，下面我們聊聊偽選擇器，它們提供了更復雜的功能，但非直接對應HTML檔案應以的元素。偽選擇器主要分兩種：偽元素和偽類。下面我們先詳細聊聊偽元素選擇器。

偽元素選擇器

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>

程式碼執行結果如下圖所示：

11_selection偽元素.gif

::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偽選擇器學習之偽元素選擇器解析的詳細內容，更多請關注TW511.COM其它相關文章！