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...