CSS 菜鳥教程

CSS 盒子模型

CSS3菜鳥教程

CSS 參考手冊

CSS @規(guī)則(RULES)

CSS Pseudo-elements(偽元素)

CSS Pseudo-elements 偽元素是一個附加至選擇器末的關(guān)鍵詞,允許你對被選擇元素的特定部分修改樣式。注意:與偽元素比較,pseudo-classes(偽類) 能夠根據(jù)狀態(tài)改變元素樣式。

CSS偽元素是一種樣式化文檔元素的方法,這些元素沒有由文檔樹中的位置明確定義。

什么是偽元素

CSS偽元素允許您設(shè)置元素或元素部分的樣式,而無需向其添加任何ID或類。當(dāng)您只想為段落的第一個字母設(shè)置樣式以創(chuàng)建首字下沉效果,或者只想通過樣式表在元素之前或之后插入一些內(nèi)容等情況下,這將非常有用。

CSS3 為偽元素引入了新的雙冒號(::)語法,以區(qū)分偽元素和偽類。偽元素的新語法可以通過以下方式給出:

選擇器::偽元素{ 屬性 ; }

這些是以下最常用的偽元素:

::first-line 第一行偽元素

該::first-line偽元素應(yīng)用特殊的樣式添加到文本的第一行。

以下示例中的樣式規(guī)則設(shè)置了段落中第一行文本的格式。第一行的長度取決于瀏覽器窗口或包含元素的大小。

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
測試看看?/?

注意:可以應(yīng)用于::first-line偽元素的CSS屬性是:font字體屬性, background背景屬性, color, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height。

:: first-letter偽元素

::first-letter偽元素用于將特殊的樣式添加到文本的第一行的第一個字母。以下示例中的樣式規(guī)則設(shè)置文本段落的首字母格式,并創(chuàng)建類似首字下沉的效果。

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
測試看看?/?

注意:可以應(yīng)用于::first-letter偽元素的CSS屬性是:font 字體屬性, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align (如果沒有屬性float或 float屬性值為'none), color, margin 和 padding 屬性, border 邊框?qū)傩? background 背景屬性.

:: before和:: after偽元素

::before和::after偽元素可以用于之前或一個元素的內(nèi)容之后插入生成的內(nèi)容。 content CSS屬性與這些偽元素結(jié)合使用時(shí),插入所生成的內(nèi)容。

這對于進(jìn)一步修飾內(nèi)容豐富的元素非常有用,這些元素不應(yīng)屬于頁面的實(shí)際標(biāo)記。您可以使用這些偽元素插入常規(guī)字符串或嵌入對象(例如圖像)和其他資源。

h1::before {
    content: url("images/marker-left.gif");
}
h1::after {
    content: url("images/marker-right.gif");
}
測試看看?/?

偽元素和CSS類

通常,我們只需要使用這些偽元素設(shè)置文本的某個段落或其他塊級元素的樣式。在那里,向偽元素聲明一個類就起作用了。偽元素可以與CSS類組合以產(chǎn)生效果,特別是對于具有該類的元素。

以下示例中的樣式規(guī)則將顯示所有段落的第一個字母class="article",以綠色,大小為xx-large。

p.article::first-letter {
    color: #00ff00;
    font-size: xx-large;
}
測試看看?/?
丰满人妻一级特黄a大片,午夜无码免费福利一级,欧美亚洲精品在线,国产婷婷成人久久Av免费高清