CSS僞元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>僞元素</title>
<style>
p::first-letter{
color: red;
}
P.line::first-line{
color: red;
}
h1::before{
content: '[]';
color: red;
}
h2::after{
content: '[]';
color: skyblue;
}
</style>
</head>
<body>
<!--僞元素：僞類使用一個冒號，而僞元素使用兩個冒號，css2定義了四個僞元素，分別用於裝飾元素的首字母、首行，以及建立和裝飾「前置」和「後置」
內容。僞元素和僞類很像，它在文檔中插入虛構的元素。
注意：全部僞元素必須出如今選擇器的最後。例如P::first-line span是無效的-->
<!-- 1. ::first-letter僞元素用於裝飾任何非行內元素的首字母，或者開頭的標點符號和首字母(若是文本以標點符號開頭) -->
<!-- 例以下面的例子，將把每一段的首字母設爲紅色 -->
<p>hello</p>
<p>world</p>
<!-- 這個規則實際上至關於讓瀏覽器裝飾每個p元素中包圍首字母的一個虛構元素。例如： -->
<p><p-first-letter>h</p-first-letter>llo</p>
<p><p-first-letter>w</p-first-letter>orld</p>
<!--::first-letter樣式只應用到上面那個虛構的元素裏面的內容。<p-first-letter>元素不會出如今源碼中，也不會出如今DOM樹中
而是讓瀏覽器動態構建，目的是把::first-letter的樣式應用到相應的文本上。也即，<p-first-letter>是一個僞元素。 -->
<!-- 2. ::first-line用於裝飾元素的首行文本 -->
<!-- 能夠看到下面id爲line的p元素中換行符前面的那一行文本變成了紅色-->
<p class="line">
關於華爲鴻蒙系統，另據國外媒體Huawei Central報道，有知情人士透露，華爲的自<br>
研操做系統鴻蒙OS已經在小規模的測試之中，知情人士表示，這款華爲新機頗有可能
</p>
<!-- 對::first-letter和::first-line的限制 目前這兩個僞元素只能應用到塊級元素上，例如標題或者段落，不能應用到
行內元素上，例如span元素等。-->
<!-- 3.裝飾元素的前置或者後置內容能夠使用僞元素::before ::after -->
<!-- 例如想要在h1元素前面增長一個括號 h1::before{content: '[]';color: red;}-->
<h1>china</h1>
<!-- 想要把內容放入元素的後面能夠使用::after僞元素 h2::after{content:'[]';color: skyblue;-->
<h2>css tricks</h2>
</body>
</html>
複製代碼
相關文章
- 1. CSS 僞元素
- 2. CSS ：僞元素
- 3. css 僞元素
- 4. CSS——僞元素
- 5. CSS僞元素
- 6. CSS 僞類與僞元素
- 7. css僞類和僞元素
- 8. CSS僞類與僞元素
- 9. css僞類與僞元素
- 10. CSS僞類和僞元素
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 適用於PHP初學者的學習線路和建議
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。