最新的Web開發教程
 

CSS偽元素


什麼是偽元素?

一個CSS偽元素用於元素的指定樣式的部分。

例如,它可用於:

  • 風格的第一個字母,或行,元素
  • 前插入內容,或之後,元素的含量

句法

偽元素的語法:

selector::pseudo-element {
    property:value;
}
注意 注意雙冒號符號- ::first-line:first-line

雙冒號替換為CSS3偽元素單冒號符號。 這是由W3C企圖偽類 和偽元素之間進行區分。

被用於兩個偽類和CSS2中和CSSI偽元素單結腸語法。

為了向後兼容,單冒號語法是CSS2 CSS1和偽元素可以接受的。

::first-line偽元素

所述::first-line偽元素用於特殊風格添加到文本的第一行。

下面的示例格式中的所有文本的第一行<p>元素:

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
試一試»

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

下面的屬性適用於::first-line偽元素:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

::first-letter偽元素

::first-letter偽元素用於將特殊的樣式添加到文本的第一個字母。

下面的示例格式中的所有文本的第一個字母<p>元素:

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
試一試»

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

下面的屬性適用於::first-letter pseudo-元素:

  • font屬性
  • color特性
  • background性質
  • margin性質
  • padding屬性
  • border屬性
  • text-decoration
  • vertical-align (僅當"float""none"
  • text-transform
  • line-height
  • float
  • clear

偽元素和CSS類

偽元素可以與CSS類組合:

p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}
試一試»

上面的例子將顯示段的第一個字母與class="intro" ,在紅,在一個較大的尺寸。


多重偽元素

若干偽元件也可以組合。

在下面的例子中,一個段落的第一個字母將是紅色的,在XX-大字體大小。 第一行的其餘部分將是藍色,而小型股。 該段的其餘部分將是默認字體大小和顏色:

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
試一試»

CSS -的::before偽元素

::before偽元素可以用來插入一個元素的內容之前的一些內容。

以下示例將每個內容之前的圖像<h1>元素:

h1::before {
    content: url(smiley.gif);
}
試一試»

CSS -在::after偽元素

::after偽元素可以用來插入一個元素的含量後一些內容。

以下示例將每個內容後的圖像<h1>元素:

h1::after {
    content: url(smiley.gif);
}
試一試»

CSS -該::selection偽元素

::selection偽元素是由用戶選擇的元素的部分相匹配。

下面的CSS屬性可以應用到::selectioncolorbackgroundcursoroutline

下面的示例使黃色背景選定的文本紅色:

::selection {
    color: red;
    background: yellow;
}
試一試»

自測練習用!

練習1» 練習2» 練習3»


所有CSS偽元素

選擇 舉例說明
::after p::after 每個<p>元素的內容之後插入的東西
::before p::before 每個內容前插入的東西<p>元素
::first-letter p::first-letter 選擇每個的第一個字母<p>元素
::first-line p::first-line 選擇每個的第一行<p>元素
::selection p::selection 選擇由用戶選擇的一個元件的一部分

所有的CSS偽類

選擇 舉例說明
:active a:active 選擇活動鏈接
:checked input:checked 選擇每個檢查<input>元素
:disabled input:disabled 每一個選擇禁用<input>元素
:empty p:empty 選擇每<p>沒有孩子的元素
:enabled input:enabled 選擇每個已啟用<input>元素
:first-child p:first-child 選擇每<p>元素是它的父的第一個孩子
:first-of-type p:first-of-type 選擇每<p>元素,它是第一個<p>它的父元素
:focus input:focus 選擇<input>元素具有焦點
:hover a:hover 選擇了鼠標鏈接
:in-range input:in-range 選擇<input>同的值的指定範圍內的元件
:invalid input:invalid 選擇所有<input>具有無效值的元素
:lang(language) p:lang(it) 選擇每<p>用lang屬性值開始元素"it"
:last-child p:last-child 選擇每<p>元素是它的父的最後一個子
:last-of-type p:last-of-type 選擇每<p>元素是最後<p>它的父元素
:link a:link 選擇所有訪問過的鏈接
:not(selector) :not(p) 選擇的每一個元素不是一個<p>元素
:nth-child(n) p:nth-child(2) 選擇每<p>元素是它的父的第二個孩子
:nth-last-child(n) p:nth-last-child(2) 選擇每<p>元素是它的父的第二個孩子,從最後一個子計數
:nth-last-of-type(n) p:nth-last-of-type(2) 選擇每<p>元素是第二<p>它的父元素,從最後一個子計數
:nth-of-type(n) p:nth-of-type(2) 選擇每<p>元素是第二<p>它的父元素
:only-of-type p:only-of-type 選擇每<p>元素是唯一<p>它的父元素
:only-child p:only-child 選擇每<p>元素是它的父的獨生子
:optional input:optional 選擇<input>沒有元素"required"的屬性
:out-of-range input:out-of-range 選擇<input>與值的元素在指定範圍之外
:read-only input:read-only 選擇<input>帶元素"readonly"屬性指定
:read-write input:read-write 選擇<input>沒有元素"readonly"屬性
:required input:required 選擇<input>與元素"required"指定屬性
:root root 選擇文檔的根元素
:target #news:target 選擇當前活躍#news元(點擊包含錨名的URL)
:valid input:valid 選擇所有<input>與一個有效的價值要素
:visited a:visited 選擇所有訪問過的鏈接