CSS3 before和 after偽類的用法

偽類用於定義元素的特殊狀態。例如，它可用於：

後代選擇器匹配作為指定元素後代的所有元素。以下示例選擇元素內的所有元素：

選擇器:偽類

/* 未訪問的鏈結 */ a:link /* 已瀏覽過的鏈結 */ a:visited /* 滑鼠懸停時候的鏈結 */ a:hover /* 選定的鏈結 */

a:active

注意：a:hover必須在css定義a:link之後和a:visited之後才能生效！a:active必須a:hover在css定義之後才能有效！偽類名稱不區分大小寫。

a.highlight:hover

:hover在元素上使用偽類的示例：

div:hover

將滑鼠懸停在元素上以顯示元素（如工具提示）

p

div:hover p

:first-child偽類指定的元素是另乙個元素的第乙個子匹配。在以下示例中，選擇器匹配任何元素的第乙個子元素元素：

p:first-child

匹配所有元素中的第乙個元素

p i:first-child

匹配所有第乙個子元素中的所有元素

p:first-child i

:lang偽類允許定義不同語言的特殊規則。在下面的示例中，:lang使用lang=「no」定義元素的引用：

q:lang(no)

選擇器

例子描述

:active

a:active

選擇活動鏈結

:checked

input:checked

選擇每個選中的元素

:disabled

input:disabled

選擇每個禁用的元素

:empty

p:empty

選擇每個沒有子元素的元素

:enabled

input:enabled

選擇每個啟用的元素

:first-child

p:first-child

選擇作為其父級的第乙個子元素的每個元素

:first-of-type

p:first-of-type

選擇每個元素，它是其父元素的第乙個元素

:focus

input:focus

選擇具有焦點的元素

:hover

a:hover

選擇滑鼠懸停時的鏈結

:in-range

input:in-range

選擇具有指定範圍內的值的元素

:invalid

input:invalid

選擇具有無效值的所有元素

:lang(language)

p:lang(it)

選擇具有以「it」開頭的lang屬性值的每個元素

:last-child

p:last-child

選擇作為其父級的最後乙個子元素的每個元素

:last-of-type

p:last-of-type

選擇每個元素，它是其父元素的最後乙個元素

:link

a:link

選擇所有未訪問的鏈結

:not(selector)

:not(p)

選擇不是元素的每個元素

:nth-child(n)

p:nth-child(2)

選擇作為其父級的第二個子元素的每個元素

:nth-last-child(n)

p:nth-last-child(2)

選擇每個元素作為其父元素的第二個子元素，從最後乙個子元素開始計算

:nth-last-of-type(n)

p:nth-last-of-type(2)

選擇每個元素作為其父元素的第二個元素，從最後乙個子元素開始計算

:nth-of-type(n)

p:nth-of-type(2)

選擇每個元素，它是其父元素的第二個元素

:only-of-type

p:only-of-type

選擇每個元素，它是其父元素的唯一元素

:only-child

p:only-child

選擇每個元素，它是其父元素的唯一子元素

:optional

input:optional

選擇沒有「required」屬性的元素

:out-of-range

input:out-of-range

選擇元素，其值超出指定範圍

:read-only

input:read-only

選擇具有指定「readonly」屬性的元素

:read-write

input:read-write

選擇沒有「readonly」屬性的元素

:required

input:required

選擇指定了「required」屬性的元素

:root

root

選擇文件的根元素

:target

#news:target

選擇當前活動的#news元素（單擊包含該錨名稱的url）

:valid

input:valid

選擇具有有效值的所有元素

:visited

a:visited

選擇所有訪問過的鏈結

選擇器例子

描述::after

p::after

在每個元素後插入內容

::before

p::before

在每個元素之前插入內容

::first-letter

p::first-letter

選擇每個元素的第乙個字母

::first-line

p::first-line

選擇每個元素的第一行

::selection

p::selection

選擇使用者選擇的元素部分

html教程：html樣式

mysql之觸發器before和after的區別

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

mysql之觸發器before和after的區別

css3中的偽類before和after常見用法

before after偽類相當於在元素內部插入兩個額外的標籤，其最適合也是最推薦的應用就是圖形生成。在一些精緻的ui實現上，可以簡化html 提高可讀性和可維護性。國外這兩個偽類應用相當的普及以及興盛，不過貌似我們這邊前端er們普遍缺乏使用這兩個偽類的意識，要使用頂多也就是跟風的清除浮動應用。...

CSS3 before和 after偽類的用法

mysql之觸發器before和after的區別

mysql之觸發器before和after的區別

css3中的偽類before和after常見用法

相關推薦