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