css偽類和偽元素的學習

魏憲會發布于2019-08-30 14:19 / 1862人閱讀

摘要：發現有很多東西效果其實可以用偽類或者偽元素實現。記錄下為什么引入偽類和偽元素引入偽類和偽元素概念是為了格式化文檔樹以外的信息，也就是說。偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者列表中的第一個元素。

最近用js實現一些css效果。發現有很多東西效果其實可以用偽類或者偽元素實現。特地補充下這方面的知識。記錄下 為什么引入偽類和偽元素

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

css引入偽類和偽元素概念是為了格式化文檔樹以外的信息，也就是說。偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者列表中的第一個元素。

偽類用于當已有元素處于的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的，比如說，當用戶懸停在指定的元素時，我們可以用:hover來描述這個元素的狀態。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處于dom樹無法描述的狀態下才能為元素添加樣式，所以將其稱為偽類。

偽元素用戶創建一些不在文檔樹中的元素，并為其添加樣式，比如說，我們可以通過：before來在一個元素前增加一些文本，

偽類

偽類-狀態

:link 選擇未訪問的鏈接

:visited 選擇已訪問的鏈接

:hover選擇鼠標指針浮動在其上的元素

:active選擇活動的鏈接

:focus 選擇獲取焦點的輸入字段

偽類-結構化

:not 一個否定偽類，用于匹配不符合參數選擇器的元素

:first-child 匹配元素的第一個子元素

:last-child 匹配元素的最后一個子元素

:first-of-type 表示一組兄弟元素中其類型的第一個元素

:last-of-type 表示一組兄弟元素中其類型的最后一個元素

:nth-child 根據元素的位置匹配一個或者多個元素，它接受一個an+b形式的參數

0n+3或簡單的3匹配第三個元素
2n+1匹配位置為1,3,5,7...的元素 你可以用odd替換奇數行，even代替偶數行

:nth-last-child 與:nth-child相似，不同之處在于它從最后一個子元素開始計數

:nth-of-type與nth-child相似，不同之處在于它是只匹配特定類型的元素

:nth-last-type 與nth-of-type相似，不同之處在于它是從最后一個子元素開始計數的。

:only-child 當元素是其父元素中唯一的子元素時，:only-child匹配該元素

:only-of-type 當元素是其父元素中唯一特定類型的子元素時，:only-child匹配該元素

:target 當url帶有瞄名稱，指向文檔內某個具體的元素時:target匹配該元素

偽類-表單相關

:checked 匹配被選中的input元素，這個input元素包裹radio和checkbox.

:default 匹配默認選中的元素

:disabled 匹配禁用的表單元素

:empty 匹配沒有子元素的元素，如果元素中含有文本節點，html元素或者一個空格，則:empty不能匹配這個元素

:enabled 匹配沒有設置disabled屬性的表單元素

:in-range 匹配在指定區域內元素，

:out-of-range 匹配不在指定區域內的元素

:indetermimate 當某組中的單選框或復選框還沒有選取狀態時，：indeterminate匹配該組中所有的單選框或復選框

:valid 匹配條件驗證正確的表單元素

:invalid 匹配提交驗證錯誤的表單元素

:optional :required匹配設置有無設置required屬性的表單元素

:read-only 匹配設置了只讀屬性的元素

：read-write匹配處于編輯狀態的元素

偽類-其他關

:root 匹配文檔的跟元素

:fullscreen 匹配處于全屏模式下的元素

偽元素

有時你會發現偽元素使用了兩個冒號 (::) 而不是一個冒號 (:). 這是CSS3的一部分，并嘗試區分偽類和偽元素. 大多數瀏覽器都支持這兩個值。

1 ::before/:before 在被選元素前插入內容，需要使用content屬性指定要插入的內容。被插入的內容實際上不在文檔樹中

2 ::after/:after 在被元素后插入內容.其用法和特性與:before相似

3 ::first-letter/:first-letter 匹配元素中文本的首字母

4 ::first-line/:first-line匹配元素中第一行的文本，這個偽元素只能用在快元素中。不能用在內聯中

5 ::selection匹配被用戶選擇或者處于高亮狀態的部分，該元素只支持雙冒號的形式

6 ::placeholder 匹配占位符的文本，只有元素設置placeholder屬性是，該偽元素才能生效。

全文cx痕跡很嚴重。詳細文章請看http://www.alloyteam.com/2016...

云服務器 GPU云服務器 css元素 java抽象類和接口的區別學習css css學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115932.html

CSS基礎篇-- :before && :after的用法，偽類和偽元素的區別

摘要：一的用法如同對偽元素的名稱一樣，是用來給指定的元素的內容前面插入新的內容。二偽類和偽元素的區別偽類種類偽元素種類偽類作用對象是整個元素例如盡管這些條件不是基于的，但結果每一個都是作用于一個完整的元素，比如整個鏈接，段落，等等。一：:before && :after的用法 :before 如同對偽元素的名稱一樣，:before 是用來給指定的元素的內容前面插入新的內容。舉例說明： .b...

X_AirDu 2019-08-28 18:15 評論0 收藏0
CSS3偽類和偽元素

作為一個CSS3初學不久者來說，很容易混淆單冒號（:）和雙冒號（::）的用法，以為兩者可以互換著來使用。我自己之前也混淆過他們，因為兩者看起來太相像了，就像孿生兄弟。但實際上，他們的區別還是挺大的，最多算得上近房親戚。下面我們來開始講講單冒號（:）偽類和雙冒號（::）偽元素有什么相同和不同點（另外在CSS2中單冒號: 也叫做偽對象，具體可看看http://www.mb5u.com/tool/cs...

mozillazg 2019-04-23 13:35 評論0 收藏0
詳解 CSS 屬性 - 偽類和偽元素的區別

摘要：之前寫了一篇詳解屬性的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區別這里用偽類和偽元素來進行比較。之前寫了一篇《詳解 CSS 屬性 - :before && :after》的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 @ri...

jiekechoo 2019-08-28 17:55 評論0 收藏0
詳解 CSS 屬性 - 偽類和偽元素的區別

摘要：之前寫了一篇詳解屬性的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區別這里用偽類和偽元素來進行比較。之前寫了一篇《詳解 CSS 屬性 - :before && :after》的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 @ri...

AZmake 2019-08-01 14:39 評論0 收藏0
我終于理解了偽類和偽元素

摘要：偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間的區別，以致于混淆概念。除了上面這個本質區別以外，在中，偽類用單冒號表示而偽元素用雙冒號表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間...

張遷 2019-08-30 14:05 評論0 收藏0