亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

css偽類和偽元素的學(xué)習(xí)

魏憲會(huì) / 1920人閱讀

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

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

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

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

偽類用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的，比如說，當(dāng)用戶懸停在指定的元素時(shí)，我們可以用:hover來描述這個(gè)元素的狀態(tài)。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處于dom樹無法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類。

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

偽類

偽類-狀態(tài)

:link 選擇未訪問的鏈接

:visited 選擇已訪問的鏈接

:hover選擇鼠標(biāo)指針浮動(dòng)在其上的元素

:active選擇活動(dòng)的鏈接

:focus 選擇獲取焦點(diǎn)的輸入字段

偽類-結(jié)構(gòu)化

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

:first-child 匹配元素的第一個(gè)子元素

:last-child 匹配元素的最后一個(gè)子元素

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

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

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

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

:nth-last-child 與:nth-child相似，不同之處在于它從最后一個(gè)子元素開始計(jì)數(shù)

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

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

:only-child 當(dāng)元素是其父元素中唯一的子元素時(shí)，:only-child匹配該元素

:only-of-type 當(dāng)元素是其父元素中唯一特定類型的子元素時(shí)，:only-child匹配該元素

:target 當(dāng)url帶有瞄名稱，指向文檔內(nèi)某個(gè)具體的元素時(shí):target匹配該元素

偽類-表單相關(guān)

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

:default 匹配默認(rèn)選中的元素

:disabled 匹配禁用的表單元素

:empty 匹配沒有子元素的元素，如果元素中含有文本節(jié)點(diǎn)，html元素或者一個(gè)空格，則:empty不能匹配這個(gè)元素

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

:in-range 匹配在指定區(qū)域內(nèi)元素，

:out-of-range 匹配不在指定區(qū)域內(nèi)的元素

:indetermimate 當(dāng)某組中的單選框或復(fù)選框還沒有選取狀態(tài)時(shí)，：indeterminate匹配該組中所有的單選框或復(fù)選框

:valid 匹配條件驗(yàn)證正確的表單元素

:invalid 匹配提交驗(yàn)證錯(cuò)誤的表單元素

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

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

：read-write匹配處于編輯狀態(tài)的元素

偽類-其他關(guān)

:root 匹配文檔的跟元素

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

偽元素

有時(shí)你會(huì)發(fā)現(xiàn)偽元素使用了兩個(gè)冒號(hào) (::) 而不是一個(gè)冒號(hào) (:). 這是CSS3的一部分，并嘗試區(qū)分偽類和偽元素. 大多數(shù)瀏覽器都支持這兩個(gè)值。

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

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

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

4 ::first-line/:first-line匹配元素中第一行的文本，這個(gè)偽元素只能用在快元素中。不能用在內(nèi)聯(lián)中

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

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

全文cx痕跡很嚴(yán)重。詳細(xì)文章請(qǐng)看http://www.alloyteam.com/2016...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115932.html

相關(guān)文章

  • CSS基礎(chǔ)篇-- :before && :after的用法，偽類和偽元素的區(qū)別

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

    X_AirDu 評(píng)論0 收藏0

  • CSS3偽類和偽元素

    作為一個(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...

    mozillazg 評(píng)論0 收藏0

  • 詳解 CSS 屬性 - 偽類和偽元素的區(qū)別

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

    jiekechoo 評(píng)論0 收藏0

  • 詳解 CSS 屬性 - 偽類和偽元素的區(qū)別

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

    AZmake 評(píng)論0 收藏0

  • 我終于理解了偽類和偽元素

    摘要：偽類和偽元素，對(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í)又有很多人搞不清楚它們之間...

    張遷 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<