資訊專欄INFORMATION COLUMN
摘要：偽類用于選擇樹之外的信息，或是不能用簡單選擇器進行表示的信息。比如表示選擇元素內容的之前內容，也就是表示選擇元素被選中的內容。是的寫法，是的寫法。
偽類用于選擇DOM樹之外的信息，或是不能用簡單選擇器進行表示的信息。前者包含那些匹配指定狀態的元素，比如:visited，:active；后者包含那些滿足一定邏輯條件的DOM樹中的元素，比如:first-child，:first-of-type，:target。
（相當于一個特殊的class選擇器，用來添加一些特殊效果）
偽元素為DOM樹沒有定義的虛擬元素。不同于其他選擇器，它不以元素為最小選擇單元，它選擇的是元素指定內容。比如::before表示選擇元素內容的之前內容，也就是""；::selection表示選擇元素被選中的內容。
（相當于一個特殊的元素（div、span），可以用來存放一些特殊樣式或者內容）
在CSS3中，偽類與偽元素在語法上也有所區別，偽元素修改為以::開頭。但因為歷史原因，瀏覽器對以:開頭的偽元素也繼續支持，但建議規范書寫為::開頭。
| Selector | Meaning | CSS |
|---|---|---|
| :active | 選擇正在被激活的元素 | 1 |
| :hover | 選擇被鼠標懸浮著元素 | 1 |
| :link | 選擇未被訪問的元素 | 1 |
| :visited | 選擇已被訪問的元素 | 1 |
| :first-child | 選擇滿足是其父元素的第一個子元素的元素 | 2 |
| :lang | 選擇帶有指定 lang 屬性的元素 | 2 |
| :focus | 選擇擁有鍵盤輸入焦點的元素 | 2 |
| :enable | 選擇每個已啟動的元素 | 3 |
| :disable | 選擇每個已禁止的元素 | 3 |
| :checked | 選擇每個被選中的元素 | 3 |
| :target | 選擇當前的錨點元素 | 3 |
| :first-of-type | 選擇滿足是其父元素的第一個某類型子元素的元素 | 3 |
| :last-of-type | 選擇滿足是其父元素的最后一個某類型子元素的元素 | 3 |
| :only-of-type | 選擇滿足是其父元素的唯一一個某類型子元素的元素 | 3 |
| :nth-of-type(n) | 選擇滿足是其父元素的第n個某類型子元素的元素 | 3 |
| :nth-last-of-type(n) | 選擇滿足是其父元素的倒數第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的區別
二者寫法是等效的，都表示偽元素。
:before是CSS2的寫法，::before是CSS3的寫法。
:before的兼容性比::before兼容性好，但是H5開發中建議使用::before
注意：
偽元素要配合content屬性一起使用
偽元素不會出現在DOM中，所以不能通過js來操作，僅僅是在 CSS 渲染層加入
偽元素的特效通常要使用:hover偽類樣式來激活
.test:hover::before { /* 這時animation和transition才生效 */ } ?
?
參考地址：https://www.cnblogs.com/ammyben/p/8012747.html
https://blog.csdn.net/yangxiaoyanger/article/details/79712180
?
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1645.html
摘要：一的用法如同對偽元素的名稱一樣，是用來給指定的元素的內容前面插入新的內容。二偽類和偽元素的區別偽類種類偽元素種類偽類作用對象是整個元素例如盡管這些條件不是基于的，但結果每一個都是作用于一個完整的元素，比如整個鏈接，段落，等等。 一：:before && :after的用法 :before 如同對偽元素的名稱一樣，:before 是用來給指定的元素的內容前面插入新的內容。舉例說明： .b...
摘要：偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間的區別，以致于混淆概念。除了上面這個本質區別以外，在中，偽類用單冒號表示而偽元素用雙冒號表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間...
作為一個CSS3初學不久者來說，很容易混淆單冒號（:）和雙冒號（::）的用法，以為兩者可以互換著來使用。我自己之前也混淆過他們，因為兩者看起來太相像了，就像孿生兄弟。但實際上，他們的區別還是挺大的，最多算得上近房親戚。 下面我們來開始講講單冒號（:）偽類和雙冒號（::）偽元素有什么相同和不同點（另外在CSS2中單冒號: 也叫做偽對象，具體可看看http://www.mb5u.com/tool/cs...
摘要：之前寫了一篇詳解屬性的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區別這里用偽類和偽元素來進行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 @ri...
摘要：之前寫了一篇詳解屬性的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區別這里用偽類和偽元素來進行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 @ri...
閱讀 1316·2023-04-26 03:05
閱讀 773·2021-10-19 11:43
閱讀 3218·2021-09-26 09:55
閱讀 829·2019-08-30 15:56
閱讀 986·2019-08-30 15:44
閱讀 1240·2019-08-30 15:44
閱讀 2722·2019-08-30 14:23
閱讀 3237·2019-08-30 13:13
