當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS_伪元素_伪类

發(fā)布時(shí)間：2025/7/14 CSS 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS_伪元素_伪类小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明出處。 https://blog.csdn.net/twilight_karl/article/details/55804090

偽類

link 未訪問的鏈接
visited 已訪問的鏈接
hover 鼠標(biāo)移到元素上
active 向被激活的鏈接添加樣式
focus 獲得輸入焦點(diǎn)的元素
first-child 作為某元素的第一個(gè)子元素的元素
lang 向帶有指定lang屬性的元素添加樣式

提示：
在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

<html> <head> <style type="text/css"> a:link{ color:green; background-color:#ccc; } </style> </head><body> <p>這是一個(gè)<a href="#">段落</a></p> </body> </html>

效果如下：

focus

用于有焦點(diǎn)的元素。比如輸入框和鏈接。但并不是所有元素都有焦點(diǎn)

<html> <head> <style type="text/css"> input:focus{ background-color:blue; } </style> </head><body> <input type="input"> </body> </html>

first-child

如果一個(gè)A元素在另一個(gè)元素B當(dāng)中，并且A是B的第一個(gè)子元素，那么可以控制A的樣式
必須聲明才能在 IE 中生效。

<html> <head> <style type="text/css"> p:first-child{ color:blue; } </style> </head><body> <div> <p>這是第一個(gè)段落</p> <p>這是第二個(gè)段落</p> </div> </body> </html>

效果圖：

偽元素

first-line / :irst-letter

對(duì)文本的首行(首字母)應(yīng)用樣式

p:first-line{ background-color:green; }

這樣的效果是：

before / after

可以在元素的內(nèi)容前面（后面）插入新內(nèi)容

效果如下：

quotes : ‘String’ ‘String’ ‘String’ ‘String’

規(guī)定引號(hào)的類型,前兩個(gè)表示第一層引用的符號(hào)，后兩個(gè)表示第二層引用的符號(hào)。
使用時(shí)用<q></q>表示引號(hào)出現(xiàn)的位置。

<head> <style type="text/css"> q:lang(en) { quotes: '@' '#' "'" "'" } </style> </head><body> <p><q>This is a <q>big</q> quote.</q></p> </body>

結(jié)果是：@This is a ‘big’ quote.#

總結(jié)

以上是生活随笔為你收集整理的CSS_伪元素_伪类的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

元素