學習使用 before和 after偽元素

2021-07-08 12:25:08 字數 4031 閱讀 4636

如果你一直密切關注著各種網頁設計的部落格,你可能已經注意到了:before和:after偽元素已經在前端開發中獲得了相當多的關注。特別是在nicolas gallagher的部落格中,後期運用了很多偽類元素。

nicolas gallagher使用偽元素用靜態的html標籤建立84個gui圖示。

為了補充說明上述內容(和利用當前發展的趨勢),我收集一些完全在偽元素下執行的東西。本文主要針對這一類人群,即已經看到了用偽元素做出了很酷的東西,但想知道所有有關before在css技術裡的運用。

儘管css 規範中包含其他的偽元素,我們焦點是 :before 和 :after。因此,為了簡便起見,我所說的「偽元素」泛指這兩個特別的偽元素。

偽元素能做什麼呢?

「偽元素」,顧名思義。它建立了乙個虛假的元素,並插入到目標元素內容之前或之後。

單詞「pseudo」是希臘語的英譯,它的基本意思是「說謊的,不誠實的,錯誤的。」因此叫偽元素是適合的。因為在文件中它不實際改變什麼。相反的,它們是像幽靈一般的元素插入在css中,他們對使用者是可見的,可以通過css控制。

基本語法

:before 和 :after 偽元素編碼非常簡單(和大多數的css屬性一樣不需要一大堆的字首)。這裡是乙個簡單的例子。

1

2

3

4

5

6

7

#example:before

#example:after

這個例子中提到了兩件事情,第一,我們用#example:before和#example:after來目標鎖定相同的元素.嚴格的說,在**中他們是偽元素。

第二,在內容模組中提到,偽元素如果沒有設定「content」屬性,偽元素是無用的。

在這個例子中,擁有屬性id的元素將有乙個雜湊符號放置內容之前,和乙個句號在內容之後。

語法筆記

你可以設定content屬性值為空,並且僅僅把他當做乙個內容很少的盒子。像這樣:

1

2

3

4

5

6

#example:before

然而,你不可以完全的移除content屬性,如果你移除了,偽元素將不會起作用。至少,content屬性需要空引用作為它的值(即:content:「」)。

你也許注意到,你也可以用兩個冒號(::before 和 ::after) 寫偽元素,這個我以前討論過的。簡短的解釋是,對於這兩種語法沒有什麼不同,僅僅一點的不同是,偽元素(雙冒號),css3中的偽類是(單冒號)

最後就語法而言。從技術上講,你可以普遍的應用偽元素,不是放在特殊的元素上,像這樣:

1

2

3

:before

雖然上面是有效的,但是它十分的沒用。**會在dom裡的每個元素的內容之前插入雜湊符號。即使你刪除了標籤和它的所有內容,你仍會在頁面上看見兩個雜湊符號:乙個在裡,另乙個在標籤裡,瀏覽器會自動建立哪乙個。

插入內容的特點

正如前面提及的,插入的內容在頁面的原始碼裡是不可見的。只能在css裡可見

這會是對如何設計偽元素的乙個簡要的說明,看我下面文字編輯器的這幅圖

在這個例子中,我高亮的樣式將被應用到元素裡插入到目標元素內容的前面和後面。

還要注意的是典型的css繼承規則適用於插入的元素。例如,你有字型系列黑體,宋體,無襯線字型應用到body元素裡,然後偽元素會像其他元素一樣繼承這些字型系列。

同樣的,偽元素不會繼承沒有自然繼承自父元素(如 padding and margins)的樣式。

之前或之後是什麼?

你的直覺是:before和:after偽元素可能是 插入的內容會被注入到目標元素的前或後注入。但是,正如上面提到的,不是這樣的。

注入的內容將是有關聯的目標元素的子元素,但它會被置於這個元素的任何內容的「前」或「後」。

為了證明這一點,看看下面的**。首先,在html:

1

<pclass="box">other content.

下面是插入偽元素的css:

1

2

3

4

5

6

7

8

9

10

11

12

p.box

p.box:before

在此html裡,你所看的一段文字帶有的是乙個類的box,還有這樣的文字「other content」在裡面(像你所會看到的一樣,如果你看見了首頁的源**)。在css中,這段內容被設定了寬度,以及一些padding和可見的邊框

然後我們有了偽元素。在這個例子中,它是乙個雜湊符號插入到該段內容之前。隨後css給了它乙個邊框以及一些padding和margins。

這裡是瀏覽器中檢視的結果:

外面的盒子是這個段落。圍繞有雜湊符號的邊框表示偽元素的邊界。所以,不是插入「before」到段落,而是偽元素被置於到此段落的「other content」的前面。

插入非文字內容

我簡要的提醒,你可以把屬性的值置為空字串或是插入文字內容。你基本上有屬性的值要包含什麼的兩個額外的選擇

首先,你可以包含乙個指向乙個影象的url,就像在css裡包含乙個背景影象一樣做你能做的

1

2

3

p:before

注意不能使用引號。如果你將url用引號括起來,那麼它會變成乙個字串和插入文字「url(image.jpg)」作為其內容,插入的而不是影象本身。

當然,你可以包含乙個data uri代替影象引用,正如你可以用css背景一樣。

你還可以選擇atrr(x)中的函式的形式。此功能,根據規範?,「把x屬性的值以字串的形式返回」

下面是乙個例子:

1

2

3

a:after

attr()函式的功能是什麼?它得到特定屬性的值並把它作為插入的文字成為乙個偽元素。

上面的**會導致頁面上的每乙個元素的href值立即被放置在每個各自的元素的後面。在文件被列印時,它可以用作乙個包含所有url的列印樣式表。

你也可以用這個函式去獲取元素的title屬性,或者甚至是microdata的值。當然,並不是所有的例子都符合自己的實際,但根據不同的情況,乙個特定的屬性值作為乙個偽元素可以是實際的

然而,獲取title或者影象的alt的值並作為實際的偽元素顯示在頁面上是不可能的。記住偽元素必須是被應用元素的子元素。影象,這是void(或者是空元素),沒有子元素,所以它在這個列子中不可用,同樣也適用於其他空元素,例如:。

可怕的瀏覽器相容性

任何前端技術的發展勢頭,第乙個問題就是瀏覽器的支援。在這種情況之下,它不是個很大的問題。

瀏覽器支援:before 和 :after 偽元素棧,像這樣:

唯一真正的問題是沒有獲得支援的(不用奇怪)ie6和ie7。所以,如果你的愛好者是在良好合適的web開發(或者其他具有較低ie版本的市場),你可以繼續自由地使用偽元素。

偽元素不是決定性的

幸運的是,缺少偽元素不會造成大問題。大多數情況下,偽元素一般修飾(或者幫助)內容,不會給不支援的瀏覽器造成問題。所以,如果你的支持者具有較高的ie版本,你仍然可以在某種程度上使用它們。

一些提醒

正如前面提到的,偽元素不會出現在dom中。這些元素不是真正的元素。因此,它們不是可用的。所以,不要使用偽元素生成內容,是您的網頁的可用性和可訪問性的關鍵。

另外一件需要記住的是,開發工具,例如火狐,不要用偽元素顯示內容。所以,如果使用了,偽元素會造成難以維護和除錯緩慢。

mysql之觸發器before和after的區別

我們先做個測試 接上篇日誌建的商品表g和訂單表o和觸發器 假設 假設商品表有商品1,數量是10 我們往訂單表插入一條記錄 insert into o gid,much values 1,20 會發現商品1的數量變為 10了。這就是問題的所在,因為我們之前建立的觸發器是after,也就是說觸發的語句是...

mysql之觸發器before和after的區別

我們先做個測試 接上篇日誌建的商品表g和訂單表o和觸發器 假設 假設商品表有商品1,數量是10 我們往訂單表插入一條記錄 insert into o gid,much values 1,20 會發現商品1的數量變為 10了。這就是問題的所在,因為我們之前建立的觸發器是after,也就是說觸發的語句是...

學習使用 before和 after偽元素

如果你一直密切關注著各種網頁設計的部落格,你可能已經注意到了 before和 after偽元素已經在前端開發中獲得了相當多的關注。特別是在nicolas gallagher的部落格中,後期運用了很多偽類元素。nicolas gallagher使用偽元素用靜態的html標籤建立84個gui圖示。為了補...