css的偽元素可以做什麼
- 青灯夜游原創
- 2022-06-02 15:04:451539瀏覽
css的偽元素可以為被選元素（指定選擇器）添加特殊效果。偽元素是一個附加在選擇器末尾的關鍵詞，透過偽元素，開發者不需要藉助元素的ID或class屬性就可對被選擇元素的特定部分定義樣式。在定義偽元素時使用雙冒號“::”，以便區分偽類和偽元素。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css的偽元素可以為被選元素（指定選擇器）新增特殊效果。
偽元素是什麼？可以做什麼？
元素事實上是HTML中的概念，常常把HTML中的標籤稱為元素。那麼偽元素是什麼呢？從其名稱上來說，偽即為假，在實際的DOM中是不存在的，而事實上呢？我們可以藉助一些CSS的特性讓其模擬成一個元素，對於這樣的元素我們稱之為偽元素。
CSS 偽元素用於為某些選擇器設定特殊效果；可以選取元素的特定位置，並套用樣式。
偽元素其實是一個附加在選擇器末尾的關鍵字，透過偽元素您不需要藉助元素的 ID 或 class 屬性就可以對被選擇元素的特定部分定義樣式。
例如透過偽元素您可以設定段落中第一個字母的樣式，或在元素之前、之後插入一些內容等等。
在 CSS1 和 CSS2 中，偽元素的使用與偽類相同，都是使一個冒號:與選擇器連結。但在 CSS3 中，將偽元素單冒號的使用方法改為使用雙冒號::，以此來區分偽類和偽元素。因此，建議在使用偽元素時使用雙冒號而不是單冒號。
selector::pseudo-element {
property: value;
}其中，selector 為選擇器，pseudo-element 為偽元素的名稱，property 為 CSS 中的屬性，value 為屬性對應的值。
注意：一個選擇器中只能使用一個偽元素，而且偽元素必須緊跟在選擇器之後。依照最新的 W3C 規範，在定義偽元素時您應該使用雙冒號::而不是單一冒號:，以便區分偽類和偽元素。但由於舊版的 W3C 規範並未對此進行特別區分，因此目前絕大多數的瀏覽器都同時支援使用單冒號和雙冒號兩種方式來定義偽元素。
CSS 中提供了一系列的偽元素，如下表所示：
| # 偽元素 | # 例子 | 範例描述 |
|---|---|---|
| # ::after | p::after |
在每個 元素之後插入內容 |
| ::before | p::before |
在每個 元素之前插入內容 |
| ::first-letter | p::first-letter |
符合每個 元素中內容的首字母 |
| ::first-line | p::first-line |
符合每個 元素中內容的首行 |
| ::selection | p::selection | 匹配使用者選擇的元素部分 |
| ::placeholder | input::placeholder | 符合每個表單輸入框（例如）的placeholder 屬性 |
範例：使用偽元素::after
<!DOCTYPE html>
<html>
<head>
<style>
p.one::after {
content:"";
display: inline-block;
width: 50px;
height: 10px;
background: blue;
}
p.two::after {
content:"要插入的内容";
color: red;
font-size: 6px;
}
p.three::after {
content: url('./smiley.gif');
position: relative;
top: 8px;
}
</style>
</head>
<body>
<p class="one">伪元素 ::after</p>
<p class="two">伪元素 ::after</p>
<p class="three">伪元素 ::after</p>
</body>
</html>
以上是css的偽元素可以做什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！