CSS基础(part3)--伪类及伪元素
生活随笔
收集整理的這篇文章主要介紹了
CSS基础(part3)--伪类及伪元素
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
學習筆記，僅供參考，有錯必糾
參考自：CSS中文文檔
文章目錄
- CSS
- 偽類
- 偽元素
- `:first-line`
- `:first-letter`
- `:first-child`
- `:before` 和`:after`
CSS
偽類
| :link | 偽類將應用于未被訪問過的鏈接 |
| :hover | 偽類將應用于有鼠標指針懸停于其上的元素 |
| :active | 偽類將應用于被激活的元素，如被點擊的鏈接、被按下的按鈕等。 |
| :visited | 偽類將應用干己經(jīng)被訪問過的 |
| :focus | 偽類將應用于擁有鍵盤輸入焦點的元素 |
注意：CSS有一個層疊的特定，所以必須按照LVHA的順序使用.
- 舉個例子
頁面：
偽元素
CSS偽元素(pseudo-element)可以用來添加一些選擇器的特殊效果。
元素的語法：
選擇器:偽元素 {屬性:值;}:first-line
“first-line” 偽元素用于向文本的首行設置特殊樣式。
- 舉個例子
現(xiàn)在，我們把文本的第一行背景色設置為紅色：
<!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">數(shù)據(jù)挖掘通常與計算機科學有關，并通過統(tǒng)計、在線分析處理、情報檢索、機器學習、專家系統(tǒng)（依靠過去的經(jīng)驗法則）和模式識別等諸多方法來實現(xiàn)上述目標.數(shù)據(jù)挖掘是人工智能和數(shù)據(jù)庫領域研究的熱點問題，所謂數(shù)據(jù)挖掘是指從數(shù)據(jù)庫的大量數(shù)據(jù)中揭示出隱含的、先前未知的并有潛在價值的信息的非平凡過程。數(shù)據(jù)挖掘是一種決策支持過程，它主要基于人工智能、機器學習、模式識別、統(tǒng)計學、數(shù)據(jù)庫、可視化技術等，高度自動化地分析企業(yè)的數(shù)據(jù)，作出歸納性的推理，從中挖掘出潛在的模式，幫助決策者調(diào)整市場策略，減少風險，作出正確的決策。知識發(fā)現(xiàn)過程由以下三個階段組成：①數(shù)據(jù)準備；②數(shù)據(jù)挖掘；③結果表達和解釋。數(shù)據(jù)挖掘可以與用戶或知識庫交互。</p></body> </html>頁面：
:first-letter
“first-letter” 偽元素用于向文本的首字母設置特殊樣式。
- 舉個例子
輸出：
: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” 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容
“:after” 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容
- 舉個例子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)--伪类及伪元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 迅捷 FW326R 无线路由器无线MAC
- 下一篇： CSS基础(part4)--CSS的层叠