四種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結合使用,用于往元素類追加內容。:after偽類還有個妙用:用于產生陰影,點擊這里查看。
X:hover
Example Source Code: div:hover { background: #e3e3e3; } |
hover在52CSS.com前面的文章中已經介紹過,IE6下只支持a的hover。
即使用border-bottom: 1px solid black; 要好于text-decoration: underline;
從實際的效果來看,使用border-bottom的距離比text-decoration來的合理,但使用border-bottom存在一些風險,比如顏色問題。
X:not(selector)
Example Source Code: div:not(#container) { color: blue; } |
否定偽類選擇器,這還是比較好理解的,上述將會把非id為container的div的字體顏色設置為藍色。
:not偽類IE8并不支持,IE9已經支持了。
X::pseudoElement
Example Source Code : p::first-line { font-weight: bold; font-size: 1.2em; } |
偽類,用于給元素的片段添加樣式,這如何理解呢?比如你要讓一個段落的第一行的文字加粗,那么這個選擇器是不二之選。
除此之外,你還可以給第一個字加上特殊樣式,這個應用還是非常常見的
::Example Source Code p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; } |
相關文章
- css偽類偽元素域高級選擇器的介紹,需要的朋友可以參考一下2013-02-26
- 今天說說九個CSS3結構性偽類選擇器2012-04-18
- 前面花了兩節(jié)內容分別在《CSS3選擇器——基本選擇器》和《CSS3選擇器——屬性選擇器》介紹了CSS3選擇器中的基本選擇器和屬性選擇器使用方法,今天要和大家一起學習CSS3選擇2012-01-21
- CSS3標準已提出數年,但是目前能實現她的瀏覽器并不多,雖然部分瀏覽器能實現部分規(guī)范,但這又有什么用呢?面對更多的兼容性問題,今天我們就來“前瞻”一下CSS3的一個偽類2010-07-10
- 網頁制作Webjx文章簡介:CSS3標準已提出數年,但是目前能實現她的瀏覽器并不多,雖然部分瀏覽器能實現部分規(guī)范,但這又有什么用呢?面對更多的兼容性問題,今天我們就來“2009-04-02
css對邊框的屬性控制和鏈接的偽類選擇器-CSS教程-網頁制作-網頁教學網
原文:http://jorux.com/archives/property-3-if-you-love-css/ 本篇主要介紹css對邊框(border)的屬性控制和鏈接(link)的偽類選擇器. 邊框(border): css控制的邊框屬2008-10-17- 這篇文章主要介紹了CSS :visited偽類選擇器隱秘往事回憶錄,需要的朋友可以參考下2018-10-12