四種css 偽類選擇器
發(fā)布時間：2012-04-18 13:44:28 作者：佚名 
我要評論
我要評論偽類，用于給元素的片段添加樣式，這如何理解呢？比如你要讓一個段落的第一行的文字加粗，那么這個選擇器是不二之選
X:after
| Example Source Code ： .clearfix:after { content: “”; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; } |
我想上面這段代碼，很多朋友都非常熟悉，是清理浮動時常用的hack方法。:after偽類與content結(jié)合使用，用于往元素類追加內(nèi)容。:after偽類還有個妙用：用于產(chǎn)生陰影，點(diǎn)擊這里查看。
X:hover
| Example Source Code： div:hover { background: #e3e3e3; } |
hover在52CSS.com前面的文章中已經(jīng)介紹過，IE6下只支持a的hover。
即使用border-bottom: 1px solid black; 要好于text-decoration: underline;
從實(shí)際的效果來看，使用border-bottom的距離比text-decoration來的合理，但使用border-bottom存在一些風(fēng)險，比如顏色問題。
X:not(selector)
| Example Source Code： div:not(#container) { color: blue; } |
否定偽類選擇器，這還是比較好理解的，上述將會把非id為container的div的字體顏色設(shè)置為藍(lán)色。
:not偽類IE8并不支持，IE9已經(jīng)支持了。
X::pseudoElement
| Example Source Code ： p::first-line { font-weight: bold; font-size: 1.2em; } |
偽類，用于給元素的片段添加樣式，這如何理解呢？比如你要讓一個段落的第一行的文字加粗，那么這個選擇器是不二之選。
除此之外，你還可以給第一個字加上特殊樣式，這個應(yīng)用還是非常常見的
| ::Example Source Code p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; } |
相關(guān)文章
- css偽類偽元素域高級選擇器的介紹，需要的朋友可以參考一下2013-02-26
- 今天說說九個CSS3結(jié)構(gòu)性偽類選擇器2012-04-18
- 前面花了兩節(jié)內(nèi)容分別在《CSS3選擇器——基本選擇器》和《CSS3選擇器——屬性選擇器》介紹了CSS3選擇器中的基本選擇器和屬性選擇器使用方法，今天要和大家一起學(xué)習(xí)CSS3選擇2012-01-21
- CSS3標(biāo)準(zhǔn)已提出數(shù)年，但是目前能實(shí)現(xiàn)她的瀏覽器并不多，雖然部分瀏覽器能實(shí)現(xiàn)部分規(guī)范，但這又有什么用呢？面對更多的兼容性問題，今天我們就來“前瞻”一下CSS3的一個偽類2010-07-10
- 網(wǎng)頁制作Webjx文章簡介：CSS3標(biāo)準(zhǔn)已提出數(shù)年，但是目前能實(shí)現(xiàn)她的瀏覽器并不多，雖然部分瀏覽器能實(shí)現(xiàn)部分規(guī)范，但這又有什么用呢？面對更多的兼容性問題，今天我們就來“2009-04-02
css對邊框的屬性控制和鏈接的偽類選擇器-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
原文：http://jorux.com/archives/property-3-if-you-love-css/ 本篇主要介紹css對邊框(border)的屬性控制和鏈接(link)的偽類選擇器. 邊框(border): css控制的邊框?qū)?/div> 2008-10-17這篇文章主要介紹了CSS :visited偽類選擇器隱秘往事回憶錄,需要的朋友可以參考下2018-10-12最新評論