本篇文章帶給大家的內容是介紹css中偽類和偽元素有什麼差別？ :before和::before的差別。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
偽類是用來選擇DOM樹以外的訊息，或是無法用簡單選擇器來表示的訊息。前者包含那些符合指定狀態的元素，例如:visited，:active；後者包含那些滿足一定邏輯條件的DOM樹中的元素，例如:first- child，:first-of-type，:target。
（相當於一個特殊的class選擇器，用來添加一些特殊效果）
偽元素為DOM樹沒有定義的虛擬元素。不同於其他選擇器，它不以元素為最小選擇單元，它選擇的是元素指定內容。例如::before表示選擇元素內容的之前內容，也就是""；::selection表示選擇元素被選取的內容。
（相當於一個特殊的元素（p、span），可以用來存放一些特殊樣式或內容）
在CSS3中，偽類與偽元素在語法上也有所區別，偽元素修改為以::開頭。但因為歷史原因，瀏覽器對以:開頭的偽元素也繼續支持，但建議規範書寫為::開頭。
偽類別
#| Selector | Meaning | CSS |
|---|---|---|
| ##:active | 選擇正在被啟動的元素 | #1 |
| :hover | 選擇被滑鼠懸浮著元素 | 1 |
| :link | 選擇未被存取的元素 | 1 |
| :visited | 選擇已被存取的元素 | 1 |
| 選擇滿足是其父元素的第一個子元素的元素 | 2 | |
| #選擇帶有指定lang 屬性的元素 | 2 | |
| #選擇擁有鍵盤輸入焦點的元素 | 2 | |
| #選擇每個已啟動的元素 | #3 | |
| 選擇每個已禁止的元素 | 3 | |
| 選擇每個被選取的元素 | 3 | |
| 選擇目前的錨點元素 | 3 | |
| ##選擇滿足是其父元素的第一個某類型子元素的元素 | 3 | |
| 選擇滿足是其父元素的最後一個某類型子元素的元素 | 3 | |
| 選擇滿足是其父元素的唯一一個某類型子元素的元素 | #3 | |
| 選擇滿足是其父元素的第n個某類型子元素的元素 | #3 | |
| 選擇滿足是其父元素的倒數第n個某類型的元素 | 3 | |
| :only-child | #選擇滿足是其父元素的唯一子元素的元素 | 3 |
| :last-child | #選擇滿足是其父元素的最後一個元素的元素 | 3 |
| #:nth-child(n) | #選擇滿足是其父元素的第n個子元素的元素 | 3 |
| :nth- last-child(n) | 選擇滿足是其父元素的倒數第n個子元素的元素 | 3 |
| :empty | 選擇滿足沒有子元素的元素 | 3 |
| :in-range | #選擇滿足值在指定範圍內的元素 | #3 |
| :out-of-range | #選擇值不在指定範圍內的元素 | 3 |
| :invalid | 選擇滿足值為無效值的元素 | 3 |
| :valid | 選擇滿足值為有效值的元素 | 3 |
| #:not(selector) | 選擇不滿足selector的元素 | 3 |
| :optional | 選擇為可選項的表單元素，即沒有「required」屬性 | #3 |
| :read- only | 選擇有"readonly"的表單元素 | 3 |
| ##:read-write | 選擇沒有"readonly"的表單元素 | 3 |
| :root | 選擇根元素 | #3 |
| #Selector | Meaning | #CSS |
|---|---|---|
| ::first-letter | #選擇指定元素的第一個單字 | 1 |
| ::first-line | 選擇指定元素的第一行 | 1 |
| ::after | 在指定元素的內容前面插入內容 | 2 |
| #::before | 在指定元素的內容後面插入內容 | 2 |
| ::selection | 選擇指定元素中被使用者選取的內容 | 3 |
:before和::before的區別
注意：
.test:hover::before { /* 这时animation和transition才生效 */ }參考網址：https://www.cnblogs.com/ammyben/p /8012747.html
###https://blog.csdn.net/yangxiaoyanger/article/details/79712180#######以上是css中偽類和偽元素有什麼差別？ :before和::before的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
