什麼是css3偽元素
- 青灯夜游原創
- 2022-01-06 11:08:542777瀏覽
在css3中，偽元素是一個附加在選擇器末尾的關鍵詞，其直義理解就是“假元素”或“偽裝元素”，實際上就是虛擬的元素；偽元素主要用於建立一些不在DOM樹中的元素，並為其添加樣式。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css3偽元素
假元素直義理解就是"假元素"或"偽裝元素"。其實也可以這麼理解， 偽元素其實就是虛擬的元素，不存在的元素(code形式), 你也無發在文檔中找到他們，因此說偽元素是虛擬元素。
偽元素是一個附加在選擇器末尾的關鍵字，主要用於建立一些不在DOM樹中的元素，並為其添加樣式。
透過偽元素您不需要藉助元素的 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 |
1. ::after
伪元素 ::after 能够在指定元素的后面插入一些内容，在 ::after 中需要使用 content 属性来定义要追加的内容，而且在 ::after 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content 属性的值定义为空""）。
下面通过一个示例来演示伪元素 ::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>运行结果如下图所示：
2. ::before
伪元素 ::before 能够在指定元素的前面插入一些内容。与 ::after 相似，::before 中也需要使用 content 属性来定义要追加的内容，而且在 ::before 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content 属性的值定义为空""）。
下面通过一个示例来演示伪元素 ::before 的使用：
<!DOCTYPE html>
<html>
<head>
<style>
p.one::before {
content:"";
display: inline-block;
width: 50px;
height: 10px;
background: blue;
}
p.two::before {
content:"要插入的内容";
color: red;
font-size: 6px;
}
p.three::before {
content: url('./smiley.gif');
position: relative;
top: 8px;
}
</style>
</head>
<body>
<p class="one">伪元素 ::before</p>
<p class="two">伪元素 ::before</p>
<p class="three">伪元素 ::before</p>
</body>
</html>运行结果如下图所示：
3. ::first-letter
伪元素 ::first-letter 用来设置指定元素中内容第一个字符的样式，通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是，伪元素 ::first-letter 仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。
下面通过示例来演示伪元素 ::first-letter 的使用：
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter{
font-size: 2em;
color: blue;
}
</style>
</head>
<body>
<p>伪元素 ::first-letter</p>
</body>
</html>运行结果如下图所示：
4. ::first-line
伪元素 ::first-line 用来设置指定元素中内容第一行的样式，与 ::first-letter 类似，伪元素 ::first-line 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。
下面通过示例来演示伪元素 ::first-line 的使用：
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line{
font-size: 1.5em;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<p>伪元素 ::first-line 用来设置指定元素中内容第一行的样式，与 ::first-letter 类似，伪元素 ::first-line 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。</p>
</body>
</html>运行结果如下图所示：
5. ::selection
伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。
下面通过示例来演示伪元素 ::selection 的使用：
<!DOCTYPE html>
<html>
<head>
<style>
p::selection{
color: red;
background-color: #CCC;
}
</style>
</head>
<body>
<p>伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。 </p>
</body>
</html>运行结果如下图所示：
6. ::placeholder
伪元素 ::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视频教程）
以上是什麼是css3偽元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！