css改變偽元素color CSS 偽元素

2021-10-17 01:51:51 字數 2379 閱讀 4912

css偽元素是用來新增一些選擇器的特殊效果。

css偽元素控制的內容和元素是沒有差別的,但是它本身只是基於元素的抽象,並不存在於文件中,所以稱為偽元素。

語法偽元素的語法:

selector:pseudo-element

css類也可以使用偽元素:

selector.class:pseudo-element

:first-line 偽元素

"first-line" 偽元素用於向文字的首行設定特殊樣式。

在下面的例子中,瀏覽器會根據 "first-line" 偽元素中的樣式對 p 元素的第一行文字進行格式化:

例項p:first-line

color:#ff0000;

font-variant:small-caps;

注意:"first-line" 偽元素只能用於塊級元素。

注意: 下面的屬性可應用於 "first-line" 偽元素:font properties

color properties

background properties

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

:first-letter 偽元素

"first-letter" 偽元素用於向文字的首字母設定特殊樣式:

例項p:first-letter

color:#ff0000;

font-size:xx-large;

注意: "first-letter" 偽元素只能用於塊級元素。

注意: 下面的屬性可應用於 "first-letter" 偽元素:font properties

color properties

background properties

margin properties

padding properties

border properties

text-decoration

vertical-align (only if "float" is "none")

text-transform

line-height

float

clear

偽元素和css類

偽元素可以結合css類:

p.article:first-letter

a paragraph in an article

上面的例子會使所有 class 為 article 的段落的首字母變為紅色。

multiple pseudo-elements

可以結合多個偽元素來使用。

在下面的例子中,段落的第乙個字母將顯示為紅色,其字型大小為 xx-large。第一行中的其餘文字將為藍色,並以小型大寫字母顯示。

段落中的其餘文字將以預設字型大小和顏色來顯示:

例項p:first-letter

color:#ff0000;

font-size:xx-large;

p:first-line

color:#0000ff;

font-variant:small-caps;

css - :before 偽元素

":before" 偽元素可以在元素的內容前面插入新內容。

下面的例子在每個

例項h1:before

content:url(smiley.gif);

css - :after 偽元素

":after" 偽元素可以在元素的內容之後插入新內容。

下面的例子在每個

例項h1:after

content:url(smiley.gif);

所有css偽類/元素選擇器示例示例說明

:linka:link選擇所有未訪問鏈結

:visiteda:visited選擇所有訪問過的鏈結

:activea:active選擇正在活動鏈結

:hovera:hover把滑鼠放在鏈結上的狀態

:focusinput:focus選擇元素輸入後具有焦點

:first-letterp:first-letter選擇每個

元素的第乙個字母

:first-linep:first-line選擇每個

元素的第一行

:first-childp:first-child選擇器匹配屬於任意元素的第乙個子元素的 元素

:beforep:before在每個

元素之前插入內容

:afterp:after在每個

元素之後插入內容

:lang(language)p:lang(it)為

元素的lang屬性選擇乙個開始值

css改變偽元素color CSS偽元素

標籤 1 p first line 偽元素 本來p元素的第一行是一句文字,並不是乙個元素,但是這裡將p元素的第一行偽裝成乙個元素了,然後給它設定樣式 font size 30px font family arial color red p first letter 這裡將p標籤這個元素的第乙個字母偽...

JQ jQuery改變css偽元素樣式

偽元素是什麼?例如 bofore after 偽元素不是dom,不能直接操作。若有以下html和css,通過操作偽元素改變圖示顏色 glyphicon number before有兩種方法實現 1 通過新增class的方法實現 對於本例子,適用於改變的顏色已知的情況下 table container...

如何改變css偽元素的樣式

一 css偽元素 css 偽元素用於向某些選擇器設定特殊效果。偽元素的用法如下 selector pseudo elementcss 類也可以和偽元素搭配使用 selector.class pseudo element二 修改偽元素樣式 1.問題描述 偽元素例子 content content be...