CSS 虛擬 (偽) 元素選擇器 (Selector) 教學範例

2018-09-02 腳印網頁資訊設計

「CSS 虛擬（偽）元素」為較特殊的選擇器，它在網頁中實際有形，但並不是由某個元素定義的局部範圍，例如選取某元素段落的第一行、或者在某元素之前還是之後新增文字內容。

E 為 Element (元素) 的簡稱，表示 HTML 的標籤名稱如 <h1> <p> <div> ...
F 也是 Element，在同時講解二個元素時

是否發現「虛擬 (偽) 元素」有時使用兩個 :: 冒號有時使用一個 : 冒號，雖然大多數瀏覽器都支援這兩種方式，但由於這是 CSS3 為了區分虛擬 (偽) 類別和虛擬 (偽) 元素所制定的規範，因此「虛擬 (偽) 元素」還是使用兩個 :: 冒號較佳

CSS 虛擬 (偽) 元素列表

選取 p 元素的第一行。

CSS：

.first-line::first-line {
    background-color: skyblue;
}

HTML：

<p class="first-line">
    第一行<br>
    第二行<br>
    第三行
</p>

第一行
第二行
第三行

選取 p 元素的第一個字。

CSS：

.first-letter::first-letter {
    background-color: skyblue;
}

HTML：

<p class="first-letter">我是誰</p>

我是誰

在 p 元素之前新增文字內容 (須搭配 content 屬性)。

CSS：

.before::before {
    background-color: skyblue;
    content: "在之前產生的內容";
}

HTML：

<p class="before">原內容</p>

原內容

在 p 元素之後新增文字內容 (須搭配 content 屬性)。

CSS：

.after::after {
    background-color: skyblue;
    content: "在之後產生的內容";
}

HTML：

<p class="after">原內容</p>

原內容