成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css3偽類和偽元素你都懂了嗎

LoftySoul / 2866人閱讀

摘要：什么是偽類偽類用于定義元素的特殊狀態(tài)。例如，它可用于當(dāng)用戶將鼠標(biāo)懸停在元素上時(shí)為其設(shè)置樣式訪問和未訪問的鏈接不同樣式在獲得焦點(diǎn)時(shí)設(shè)置元素的樣式偽類的語法后代選擇器匹配作為指定元素后代的所有元素。

什么是偽類？

偽類用于定義元素的特殊狀態(tài)。 例如，它可用于：

當(dāng)用戶將鼠標(biāo)懸停在元素上時(shí)為其設(shè)置樣式

訪問和未訪問的鏈接不同樣式

在獲得焦點(diǎn)時(shí)設(shè)置元素的樣式

偽類的語法

后代選擇器匹配作為指定元素后代的所有元素。以下示例選擇

元素內(nèi)的所有

元素：

選擇器:偽類 {     屬性:值;   }

鏈接可以以不同方式顯示：

/* 未訪問的鏈接 */ 
a:link {   color: red; } 
/* 已瀏覽過的鏈接 */
 a:visited {   color: green; } 
/* 鼠標(biāo)懸停時(shí)候的鏈接 */ 
a:hover {   color: hotpink; }
 /* 選定的鏈接 */ 
a:active {   color: blue; }

注意：a:hover必須在CSS定義a:link之后和a:visited之后才能生效！a:active必須?a:hover在CSS定義之后才能有效！偽類名稱不區(qū)分大小寫。

偽類和CSS類

偽類可以與CSS類結(jié)合使用：當(dāng)您將鼠標(biāo)懸停在示例中的鏈接上時(shí)，它將更改顏色：

a.highlight:hover {   color: #ff0000; }
將鼠標(biāo)懸停在
上

:hover在

元素上使用偽類的示例：

div:hover {   background-color: blue; }
簡單的工具提示懸停

將鼠標(biāo)懸停在

元素上以顯示

元素（如工具提示）

p {   display: none;   background-color: yellow;   padding: 20px; } 
div:hover p {   display: block; }
:first-child偽類

:first-child偽類指定的元素是另一個(gè)元素的第一個(gè)子匹配。 在以下示例中，選擇器匹配任何元素的第一個(gè)子元素

元素：

p:first-child {   color: blue; }

匹配所有

元素中的第一個(gè)元素

p i:first-child {   color: blue; }

匹配所有第一個(gè)子

元素中的所有元素

p:first-child i {   color: blue; }
:lang偽類

:lang偽類允許定義不同語言的特殊規(guī)則。在下面的示例中，:lang使用lang=“no”定義元素的引用：

q:lang(no) {   quotes: "~" "~"; }
所有CSS偽類
選擇器 例子 描述
:active a:active 選擇active激活鏈接
:checked input:checked 選擇每個(gè)選中的元素
:disabled input:disabled 選擇每個(gè)禁用的元素
:empty p:empty 選擇每個(gè)沒有子元素的

元素
:enabled input:enabled 選擇每個(gè)啟用的元素
:first-child p:first-child 選擇作為其父級的第一個(gè)子元素的每個(gè)

元素
:first-of-type p:first-of-type 選擇每個(gè)

元素，它是其父元素的第一個(gè)

元素
:focus input:focus 選擇具有焦點(diǎn)的元素
:hover a:hover 選擇鼠標(biāo)懸停時(shí)的鏈接
:in-range input:in-range 選擇具有指定范圍內(nèi)的值的元素
:invalid input:invalid 選擇具有無效值的所有元素
:lang(language) p:lang(it) 選擇具有以“it”開頭的lang屬性值的每個(gè)

元素
:last-child p:last-child 選擇作為其父級的最后一個(gè)子元素的每個(gè)

元素
:last-of-type p:last-of-type 選擇每個(gè)

元素，它是其父元素的最后一個(gè)

元素
:link a:link 選擇所有未訪問的鏈接
:not(selector) :not(p) 選擇不是

元素的每個(gè)元素
:nth-child(n) p:nth-child(2) 選擇作為其父級的第二個(gè)子元素的每個(gè)

元素
:nth-last-child(n) p:nth-last-child(2) 選擇每個(gè)

元素作為其父元素的第二個(gè)子元素，從最后一個(gè)子元素開始計(jì)算
:nth-last-of-type(n) p:nth-last-of-type(2) 選擇每個(gè)

元素作為其父元素的第二個(gè)

元素，從最后一個(gè)子元素開始計(jì)算
:nth-of-type(n) p:nth-of-type(2) 選擇每個(gè)

元素，它是其父元素的第二個(gè)

元素
:only-of-type p:only-of-type 選擇每個(gè)

元素，它是其父元素的唯一

元素
:only-child p:only-child 選擇每個(gè)

元素，它是其父元素的唯一子元素
:optional input:optional 選擇沒有“required”屬性的元素
:out-of-range input:out-of-range 選擇元素，其值超出指定范圍
:read-only input:read-only 選擇具有指定“readonly”屬性的元素
:read-write input:read-write 選擇沒有“readonly”屬性的元素
:required input:required 選擇指定了“required”屬性的元素
:root root 選擇文檔的根元素
:target #news:target 選擇當(dāng)前活動(dòng)的#news元素（單擊包含該錨名稱的URL）
:valid input:valid 選擇具有有效值的所有元素
:visited a:visited 選擇所有訪問過的鏈接
所有CSS偽元素
選擇器 例子 描述
::after p::after 在每個(gè)

元素后插入內(nèi)容
::before p::before 在每個(gè)

元素之前插入內(nèi)容
::first-letter p::first-letter 選擇每個(gè)

元素的第一個(gè)字母
::first-line p::first-line 選擇每個(gè)

元素的第一行
::selection p::selection 選擇用戶選擇的元素部分

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116149.html

相關(guān)文章

  • CSS3偽類和偽元素

    作為一個(gè)CSS3初學(xué)不久者來說，很容易混淆單冒號(hào)（:）和雙冒號(hào)（::）的用法，以為兩者可以互換著來使用。我自己之前也混淆過他們，因?yàn)閮烧呖雌饋硖嘞窳?，就像孿生兄弟。但實(shí)際上，他們的區(qū)別還是挺大的，最多算得上近房親戚。 下面我們來開始講講單冒號(hào)（:）偽類和雙冒號(hào)（::）偽元素有什么相同和不同點(diǎn)（另外在CSS2中單冒號(hào): 也叫做偽對象，具體可看看http://www.mb5u.com/tool/cs...

    mozillazg 評論0 收藏0

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

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

    張遷 評論0 收藏0

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

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

    jiekechoo 評論0 收藏0

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

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

    AZmake 評論0 收藏0

發(fā)表評論

0條評論

LoftySoul

男|高級講師

TA的文章

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