資訊專欄INFORMATION COLUMN
摘要：偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間的區別，以致于混淆概念。除了上面這個本質區別以外，在中，偽類用單冒號表示而偽元素用雙冒號表示。
偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間的區別，以致于混淆概念。而當概念都混淆的時候，也往往意味著你不會經常使用它，怕出錯，怕用不好。而這也會大大影響你的效率，本來幾行代碼就可以完成的工作，卻要寫上一大堆......所以，花點時間理清楚每一個看似微小的概念，會讓我們的編程更有效率。下面進入正題。
偽類和偽元素的區別，其實很簡單，從字面上就可以理解。它們有一個共同的修飾詞“偽”，那么“偽”是什么意思呢？就是假的唄。所以，偽類就是假的類，偽元素就是假的元素，這就是在字面上它們之間的區別。下面我們再從定義上感受一下。
1.偽類CSS3給出的定義是：
The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
大致翻譯過來的意思就是：偽類存在的意義是為了通過選擇器，格式化DOM樹以外的信息以及不能被常規CSS選擇器獲取到的信息。
通過上面的概念我們知道了偽類的功能有兩種：
1.格式化DOM樹以外的信息。比如：標簽的:link、:visited等。這些信息不存在于DOM樹中。
2.不能被常規CSS選擇器獲取到的信息。比如：要獲取第一個子元素，我們無法用常規的CSS選擇器獲取，但可以通過:first-child來獲取到。
2.偽元素CSS3給出的定義如下：
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element"s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the?::before?and?::after?pseudo-elements give access to generated content).
大致翻譯過來的意思就是：偽元素可以創建一些文檔語言無法創建的虛擬元素。比如：文檔語言沒有一種機制可以描述元素內容的第一個字母或第一行，但偽元素可以做到(::first-letter、::first-line)。同時，偽元素還可以創建源文檔不存在的內容，比如使用::before 或 ::after。
3.偽類和偽元素的區別（CSS3下的區別）通過上面的概念，我們就可以知道偽類與偽元素最本質的一個區別：
偽類其實是彌補了CSS選擇器的不足，用來更方便地獲取信息；
HTML:
CSS：
li:first-child {
color: red;
}
// 選擇器不能直接選取第一個子元素
// 偽類彌補了選擇器的不足
而偽元素本質上是創建了一個虛擬容器(元素)，我們可以在其中添加內容或樣式。
HTML：
Hello, World
CSS：
.first-letter {
color: red;
}
上面的代碼其實就是：
p::first-letter {
color: red;
}
所以，你可以理解偽元素本質上是創建了一個虛擬容器(元素)了吧。
除了上面這個本質區別以外，在CSS3中，偽類用單冒號:表示；而偽元素用雙冒號::表示。一個選擇器可以同時使用多個偽類(但有的偽類會互斥)；而一個選擇器只能同時使用一個偽元素(未來的版本可能會支持多偽元素)。
4.主要用法1 :first-child
匹配第一個子元素。
HTML：
CSS：
li:first-child {
color: red; // 第一個 li 會變紅
}
2 :last-child
匹配最后一個子元素。
HTML：
CSS：
li:last-child {
color:red; // 最后一個 li 會變紅
}
3 :first-of-type
匹配屬于其父元素的第一個特定類型的子元素。
HTML：
h1文本
p文本
CSS：
p:first-of-type {
color: red; // 標簽的內容變為紅色
}
這里有必要強調一下:first-child與:first-of-type的區別。如果你的CSS寫成:
p:first-child {
color:red;
}
頁面是不會有變化的，因為
元素并不是父元素
4 :last-of-type
匹配屬于其父元素的最后一個特定類型的子元素。
HTML：
h1文本
h1文本2
p文本
CSS：
h1:last-of-type {
color: red; // 倒數第一個標簽的內容變為紅色(h1文本2)
}
1 ::before
在被選元素之前插入內容。需要指定content屬性來插入內容。
HTML：
CSS
CSS：
p::before {
content: "Hi,";
}
2 ::after
在被選元素之后插入內容。需要指定content屬性來插入內容。
HTML：
Hi,
CSS：
p::after {
content: "CSS";
}
3 ::first-letter
匹配元素中文本的首字母。
HTML：
我在學偽元素
注意：試試把 標簽改成 ???我在學偽元素
CSS：
p::first-letter {
font-size: 32px;
}
4 ::first-line
匹配元素中第一行的文本(只能在塊元素中使用)。
HTML：
我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素
CSS：
p::first-line {
color: red;
}
5 ::selection
匹配被用戶選中的部分。
HTML：
我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素
CSS：
p::selection {
color: red;
}
最后的最后，我說的不一定都對，你一定要自己試試！
(本文完)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115764.html
摘要：之前寫了一篇詳解屬性的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區別這里用偽類和偽元素來進行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 @ri...
摘要：之前寫了一篇詳解屬性的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區別這里用偽類和偽元素來進行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 @ri...
摘要：一的用法如同對偽元素的名稱一樣，是用來給指定的元素的內容前面插入新的內容。二偽類和偽元素的區別偽類種類偽元素種類偽類作用對象是整個元素例如盡管這些條件不是基于的，但結果每一個都是作用于一個完整的元素，比如整個鏈接，段落，等等。 一：:before && :after的用法 :before 如同對偽元素的名稱一樣，:before 是用來給指定的元素的內容前面插入新的內容。舉例說明： .b...
摘要：本文首發于我的博客在前面兩篇文章你不知道的一和你不知道的二中大致介紹了一些方面比較隱晦的但又很實用的技巧。系列文章你不知道的一你不知道的二本文首發于我的博客 本文首發于我的博客 在前面兩篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介紹了一些CSS方面比較隱晦的但又很實用的技巧。相信這些技巧會為大家在項目實踐中帶來一定的幫助，本文作為《你不知道的CSS》系列的第三篇...
摘要：選擇器基礎選擇器標簽選擇器針對一類標簽注意選擇的所有，而不是一個。元素元素是文檔結構的基礎。行內元素不會在它本身之前或之后生成分隔符，所以可以出現在另一個元素內容中，而不會破壞其顯示。 css選擇器 基礎選擇器 1.標簽選擇器：針對一類標簽 注意：選擇的所有，而不是一個。 p{ font-size:14px; } css 2.ID選擇器：針對某一個特定的標簽使用，只能使...
閱讀 2874·2021-11-24 09:38
閱讀 3511·2021-11-23 09:51
閱讀 967·2021-09-09 11:52
閱讀 4032·2021-08-11 11:18
閱讀 1106·2019-08-30 14:05
閱讀 3227·2019-08-30 11:23
閱讀 1759·2019-08-29 17:02
閱讀 1123·2019-08-26 13:49
