CSS——僞元素

CSS僞元素

僞元素的語法：

selector:pseudo-element {property:value;}

做    用

添加特殊樣式

:first-line 僞元素

"first-line" 僞元素用於向某個選擇器中的文字的首行添加特殊樣式：

p{font-size: 12pt}p:first-line{color: #0000FF;font-variant:small-caps;}<p>Some text that ends up on two or more lines</p>在上面的例子中，瀏覽器顯示根據 first-line 僞元素格式化的第一行。瀏覽器是依靠瀏覽器窗口的尺寸來進行分行的。

提示：first-line 僞元素僅能被用於塊級元素。

提示：下面的屬性能夠被應用到 first-line 僞元素。

font 屬性color 屬性background 屬性word-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclear

:first-letter 僞元素

first-letter 僞元素用於向某個選擇器中的文本的首字母添加特殊的樣式：

p{font-size:12pt;}p:first-letter{font-size:200%; float:left;}<p>The first words of an article.</p>輸出的效果相似於：

_____ | he first | words of anarticle.font 屬性color 屬性background 屬性margin 屬性padding 屬性border 屬性text-decorationvertical-align (僅當float爲none時)text-transformline-heightfloatclear

僞元素和 CSS 類

僞元素能夠與 CSS 類配合使用：

p.article:first-letter{color:#FF0000;}<p class="article">文章中的一個段落。</p>上面的例子會使全部 class 爲 article 的段落的首字母變爲紅色。

多重僞元素

多個僞元素能夠配合在一塊兒使用：

p{font-size:12pt;}p:first-letter{color:#FF0000; font-size:24pt;}p:first-line{color:#0000FF;}<p>The first words of an article</p>_____ | he first | words of anarticle.在上面的例子中，段落的首字母將是字號爲 24pt 的紅色。首行的其他部分將會是藍色，而段落的其他部分會是默認的顏色。

CSS2 - :before 僞元素

before 僞元素可用於在某個元素以前插入某些內容。

:before 僞元素能夠加入任意元素能夠是文字、視頻、圖片等

下面的樣式會在標題以前播放音頻：

h1:before{ content:url(beep.wav);}

下面的樣式會在標題以前加入content這個字符串，要注意 content須要用""引號包含起來.

h1:before{content:"content";}

下面的樣式會在h1標題前面加入一張圖片.

h1:before{content:url(xxx.jpg);}

CSS2 - :after 僞元素

after 僞類可用於在某個元素以後插入某些內容。

下面的樣式會在標題以後播放音頻：

h1:after{ content:url(beep.wav);}

 

w3school連接：http://www.w3school.com.cn/css/css_pseudo_elements.asp