當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS_伪元素_伪类

發布時間：2025/7/14 CSS 30 豆豆

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

偽類

link 未訪問的鏈接
visited 已訪問的鏈接
hover 鼠標移到元素上
active 向被激活的鏈接添加樣式
focus 獲得輸入焦點的元素
first-child 作為某元素的第一個子元素的元素
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>這是一個<a href="#">段落</a></p> </body> </html>

效果如下：

focus

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

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

first-child

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

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

效果圖：

偽元素

first-line / :irst-letter

對文本的首行(首字母)應用樣式

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

這樣的效果是：

before / after

可以在元素的內容前面（后面）插入新內容

效果如下：

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

規定引號的類型,前兩個表示第一層引用的符號，后兩個表示第二層引用的符號。
使用時用<q></q>表示引號出現的位置。

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

結果是：@This is a ‘big’ quote.#

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

元素