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