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

CSS

CSS基础(part3)--伪类及伪元素

發布時間：2023/12/19 CSS 22 豆豆

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

學習筆記，僅供參考，有錯必糾

參考自：CSS中文文檔

文章目錄

- CSS
- - 偽類
  - 偽元素
  - - `:first-line`
    - `:first-letter`
    - `:first-child`
    - `:before` 和`:after`

CSS

偽類

偽類意義

:link	偽類將應用于未被訪問過的鏈接
:hover	偽類將應用于有鼠標指針懸停于其上的元素
:active	偽類將應用于被激活的元素，如被點擊的鏈接、被按下的按鈕等。
:visited	偽類將應用干己經被訪問過的
:focus	偽類將應用于擁有鍵盤輸入焦點的元素

注意：CSS有一個層疊的特定，所以必須按照LVHA的順序使用.

舉個例子

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>偽類</title><style>a:link {color: red;}a:visited {color: purple;}a:hover {background-color: silver;color: white;}a:active {color: yellow;}/*LoVe HAte*/.txtName:focus {background-color: green;}a:focus {font-size: 20px;}</style> </head> <body><a href="#">當前網站</a><a href="http://www.baidu.com">百度的官網</a><a href="http://www.jd.com">新浪官網</a><div><input type="text" class="txtName"> </div> </body> </html>

頁面：

偽元素

CSS偽元素(pseudo-element)可以用來添加一些選擇器的特殊效果。

元素的語法：

選擇器:偽元素 {屬性:值;}

:first-line

“first-line” 偽元素用于向文本的首行設置特殊樣式。

舉個例子

現在，我們把文本的第一行背景色設置為紅色：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>偽元素</title><style>.datam:first-line {background-color: red;}</style></head> <body><p class="datam">數據挖掘通常與計算機科學有關，并通過統計、在線分析處理、情報檢索、機器學習、專家系統（依靠過去的經驗法則）和模式識別等諸多方法來實現上述目標.數據挖掘是人工智能和數據庫領域研究的熱點問題，所謂數據挖掘是指從數據庫的大量數據中揭示出隱含的、先前未知的并有潛在價值的信息的非平凡過程。數據挖掘是一種決策支持過程，它主要基于人工智能、機器學習、模式識別、統計學、數據庫、可視化技術等，高度自動化地分析企業的數據，作出歸納性的推理，從中挖掘出潛在的模式，幫助決策者調整市場策略，減少風險，作出正確的決策。知識發現過程由以下三個階段組成：①數據準備；②數據挖掘；③結果表達和解釋。數據挖掘可以與用戶或知識庫交互。</p></body> </html>

頁面：

:first-letter

“first-letter” 偽元素用于向文本的首字母設置特殊樣式。

舉個例子

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>偽元素</title><style>.datam:first-letter {background-color: red;font-size: 20px;}</style></head> <body><p class="datam">數據挖掘通常與計算機科學有關，并通過統計、在線分析處理、情報檢索、機器學習、專家系統（依靠過去的經驗法則）和模式識別等諸多方法來實現上述目標.數據挖掘是人工智能和數據庫領域研究的熱點問題，所謂數據挖掘是指從數據庫的大量數據中揭示出隱含的、先前未知的并有潛在價值的信息的非平凡過程。數據挖掘是一種決策支持過程，它主要基于人工智能、機器學習、模式識別、統計學、數據庫、可視化技術等，高度自動化地分析企業的數據，作出歸納性的推理，從中挖掘出潛在的模式，幫助決策者調整市場策略，減少風險，作出正確的決策。知識發現過程由以下三個階段組成：①數據準備；②數據挖掘；③結果表達和解釋。數據挖掘可以與用戶或知識庫交互。</p></body> </html>

輸出：

:first-child

對于屬于第一個子元素的元素設置特殊樣式。

舉個例子

選擇第一個子元素為span的所有標簽。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>偽元素</title><style>span:first-child {background-color: yellow;color: red;}</style> </head> <body><p><span>第一個</span><span>第二個</span><span>第三個</span></p><div><span>AAA</span><span>BBB</span><span>CCC</span> </div> </body> </html>

輸出：

:before 和:after

“:before” 偽元素可以在元素的內容前面插入新內容

“:after” 偽元素可以在元素的內容之后插入新內容

舉個例子1

在文本的同一行前后加入"-------" ：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>偽元素</title><style>div:before, div:after {content: "-------";}</style></head> <body><div>俺是div標簽</div></body> </html>

頁面：

舉個例子2

在文本的上下以塊級標簽的形式加入"-------"：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>偽元素</title><style>div:before, div:after {content: "-------";display: block;}</style> </head> <body><div>俺是div標簽</div></body> </html>

頁面：

總結

以上是生活随笔為你收集整理的CSS基础(part3)--伪类及伪元素的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：迅捷 FW326R 无线路由器无线MAC
下一篇：苹果 AR / VR 头显细节进一步确认