讓我們先看看W3的偽元素官方定義:
偽元素用來創建HTML文檔語言指定之外文檔樹的抽象層。比如HTML沒有提供文檔元素內容的首字母或第一行的訪問機制。CSS偽元素允許作者引用這些除此之外無法訪問的信息。偽元素還提供一種方法來引用不存在于文檔中的內容。(比如,::before 和 ::after )。
一個偽元素由2個冒號(::)加上偽元素的名字所定義。
:: 標記是CSS2.1新規范中引入的,用來區分偽類(pseudo-classes)和偽元素(pseudo-elements)。但出于現有樣式表兼容性原因,用戶代理必須也能支持CSS1和CSS2中引入的單冒號偽元素標記(也就是說,:first-line, :first-letter, :before 和 :after)。但是CSS2.1及以后版本新引入的偽元素不支持這種兼容語法。
每個選擇器中只能出現一個偽元素,并且只能出現在選擇器主體的后面。
注意:后續版本可能會允許每個選擇器中出現多個偽元素。
從上面的定義,我們可以得知偽元素事實上創建了一個虛擬的元素,在這個虛擬元素上可以應用一般CSS規則乃至偽類選擇器。偽元素并不選定(過濾)元素,實際上它們選定(過濾)內容(::first-line,::first-letter)或創建內容(::before,::after,然后包裝到一個虛擬容器中,作者可以為此容器添加樣式。
盡管理論上使用JavaScript也可以獲取第一行文本或第一個字母,但這高度依賴于當前使用的字體家族、字體大小、元素寬度,浮動元素等各種因素,顯得相當繁瑣。而通過CSS偽元素我們可以方便獲得。文章最后提供了示例的訪問地址。
例1 - 使用偽元素給文字自動添加語言說明后綴
CSS代碼如下:
div:lang(zh){color:lime;background:#ff0;}
:lang(en) > span{color:#3111d3;}
HTML代碼如下:
效果圖如下:
本例使用偽類:lang來過濾lang屬性為特定值(如en-us)的元素。
使用偽元素::after來給元素(文本)自動添加語言說明后綴。
通過本例,可以對偽類和偽元素的不同作用有個直觀的認識。
例2 - 使用偽元素實現首行著色和段落投影
CSS代碼如下:
HTML代碼如下:
效果圖如下:
本例使用偽類:lang來過濾lang屬性為特定值(如en-us)的元素。
使用偽元素::after來給元素(文本)自動添加語言說明后綴。
例3 - 使用偽元素實現圓環圖形
CSS代碼如下:
HTML代碼比較簡單,就一行即可,如下:
<div class="circle"></div>
效果圖如下:
注:偽元素默認是inline樣式的,通過設置成絕對定位,可強制改變display為block,這樣對其設置寬高才能生效。
本例使用偽類:after來實現內圓。
本頭條號前面一篇文章《CSS 偽類:用來增強CSS選擇器》和本篇文章內容分別講述了偽類和偽元素的使用,我們應該已經大致理解了兩者的異同點,這里再總結一下:
兩者都不存在于HTML文檔樹中,都是為了支持依靠文檔樹之外的信息來進行格式化。
出于歷史兼容性原因,一些在CSS2.1規范之前引入的偽元素使用和偽類一樣的語法標記(單冒號:)。
偽類本質上和類相同,是用來選擇過濾HTML元素的。只不過偽類是按動態特征過濾,而不是名稱、屬性或內容。
偽元素本質上和元素相同,是已有元素的某個部分或新創建的補充元素。偽元素上可以應用偽類選擇器來過濾。
偽類可以出現在選擇器的任何地方,而偽元素只能添加在最后一個簡單選擇器之后。
附:本文示例的網址:http://www.ikinsoft.com/3ddemo/pseudoelem.html
unction toNodeTree(objects, rootId) {
let nodes=[];
for (let object of objects) {
if (object.parentId===rootId) {
for (let leaf of objects) {
if (leaf.parentId===object.id) {
object.children=toNodeTree(objects, object.id);
break;
}
}
nodes.push(object);
}
}
return nodes;
}
及時解決工作難點,提高工作效率,排除工作困擾,提供信手拈來的精要代碼。
文轉載自公眾號“把科學帶回家”(ID:steamforkids)
老吉科樹是世界上最古老的挪威云杉,生長在瑞典的菲呂山上。它的根系已有9565歲,但是新生的樹干卻非常年輕,只活了幾百年。|wiki
生長于大約 3.5 億年前,有一個細長的樹干,頂部有許多長葉子。|參考文獻6
枯葉向下翻折,就變成了樹的“裙子”。|參考資料5
該圖像顯示了該樹之前和之后發現的不同植物化石的樹高。|參考資料6
轉載內容僅代表作者觀點
不代表中科院地質地球所立場
如需轉載請聯系原公眾號
*請認真填寫需求信息,我們會在24小時內與您取得聯系。