CSS 選擇器(Selectors)

選擇器就相當於 CSS 規則組的套用條件。選擇器的真正威力來自於可組合的特性,如此你便能建立非常特定的條件,好將樣式明確套用於你想套用的某個元素或某些元素。CSS Selectors(選擇器)是一個很重要的功能,決定規則要套用到哪些元素,而且 JavaScript 及 jQuery......,也可使用這種方式來獲取特定元素,所以是 FEE(Front-End Enginerr 前端工程師)必須了解的。

css

CSS 選擇器(Selectors)
模式 意思 介紹 版本
單純選擇器(Simple selector)
* 任何元素 萬用選擇器 2
E E 元素 類型選擇器 1
E#myid E 元素的 id 屬性的值等於 "myid" ID 選擇器 1
E.warning E 元素的 class 屬性,可利用空白字元區隔指定多項屬性值,其中一個屬性值等於 "warning" Class 選擇器 1
E[foo] E 元素有 foo 屬性 屬性選擇器 2
E[foo="bar"] E 元素有 foo 屬性且值等於 "bar" 屬性選擇器 2
E[foo~="bar"] E 元素有 foo 屬性,可利用空白字元區隔指定多項屬性值,其中一個包含屬性值 "bar" 屬性選擇器 2
E[foo^="bar"] E 元素有 foo 屬性且『第一個』值以 "bar"『開始』 屬性選擇器 3
E[foo$="bar"] E 元素有 foo 屬性且『最後一個』值以 "bar"『結束』 屬性選擇器 3
E[foo*="bar"] E 元素有 foo 屬性且值包含 "abc" 屬性選擇器 3
E[foo|="en"] E 元素有 foo 屬性,可利用 -(連字符)區隔指定多項屬性值,包含與前方一致的『第一個』屬性值 "en" 屬性選擇器 2
群組選擇器(roup of selectors)
E, F E 和 F 元素 群組選擇器 1
組合選擇器(Combinator selectors)
E F E 父元素內部所包含的所有後裔 F 子元素 後代組合器 1
E > F E 父元素所包含的直接第一層 F 子元素 子組合器 2
E + F E 兄元素之後相鄰的『第一個』F 弟元素 相鄰兄弟組合器 2
E ~ F E 兄元素之後的『所有』F 弟元素 一般兄弟組合器 3
虛擬(偽)類別(pseudo-class)
E:link E 元素是一個超連結(錨點)的來源,還沒訪問過的鏈接 鏈接偽類 1
E:visited E 元素是一個超連結(錨點)的來源,已經訪問過的鏈接 鏈接偽類 1
E:hover 在用戶操作的特定 E 元素,滑鼠游標懸停至元素上時 用戶操作偽類 1,2
E:focus 在用戶操作的特定 E 元素,一互動元素正獲得使用者關注(焦點) 用戶操作偽類 1,2
E:active 在用戶操作的特定 E 元素,點擊元素時 用戶操作偽類 1,2
E:target E 元素作為參考 URI 的目標 目標偽類 3
E:root E 元素的根元素 結構性偽類 3
E:nth-child(n) E 元素的父元素內的『第 n 個』子元素『不依』元素類型計數 結構性偽類 3
E:nth-last-child(n) E 元素的父元素內的『第 n 個』子元素,但為『從後往前』選擇元素『不依』元素類型計數 結構性偽類 3
E:nth-of-type(n) E 元素的父元素內的『第 n 個』E 子元素『依』指定 E 元素類型計數 結構性偽類 3
E:nth-last-of-type(n) E 元素的父元素內的『第 n 個』E 子元素,但為『從後往前』選擇元素『依』指定 E 元素類型計數 結構性偽類 3
E:first-child E 元素的父元素『第一個』子元素『不依』元素類型計數 結構性偽類 2
E:last-child E 元素的父元素『最後一個』子元素『不依』元素類型計數 結構性偽類 3
E:first-of-type E 元素的父元素『第一個』 E 子元素『依』指定 E 元素類型計數 結構性偽類 3
E:last-of-type E 元素的父元素『最後一個』 E 子元素『依』指定 E 元素類型計數 結構性偽類 3
E:only-child E 元素的父元素僅有『唯一』子元素『不依』元素類型 結構性偽類 3
E:only-of-type E 元素的父元素僅有『唯一』 E 子元素『依』指定 E 元素類型 結構性偽類 3
E:empty 沒有子元素(包括文本節點和空格)的所有 E 元素 結構性偽類 3
E:lang(fr) E 元素有 lang 屬性且值開頭等於 fr 或 fr- 語言偽類 :lang 3
E:enabled E 元素是一個 enabled(啟用)的 UI(使用者介面)元素 在 UI 元素狀態偽類 3
E:disabled E 元素是一個 disabled(禁用)的 UI(使用者介面)元素 在 UI 元素狀態偽類 3
E:checked E 元素是 UI(使用者介面)的可被選中元素,且被 checked(選中) 在 UI 元素狀態偽類 3
E:not(s) 不匹配選擇 s 的 E 元素 否定偽類 3
虛擬(偽)元素(pseudo-element)
E::first-line E 元素的首行(第一行) 偽元素 1
E::first-letter E 元素的第一個字母 偽元素 1
E::before E 元素之前產生內容 偽元素 2
E::after E 元素之後產生內容 偽元素 2

單純選擇器(Simple selector)

* 萬用選擇器(Universal selector)

  • 選擇網頁中的所有元素

選擇任何元素。

* {
    color: red;
}
<h1>h1</h1>

<div>div</div>

<p>p</p>

E 類型選擇器(Type selector)

  • 類型選擇器就是 HTML 元素的名稱

選擇 <div> 元素。

div {
    color: red;
}
<h1>h1</h1>

<div>div</div>

<p>p</p>

<div>div</div>

也可以選擇另一種元素中的所有元素,選擇在 <div> 元素內的所有元素。

div * {
    color: red;
}
<h1>h1</h1>

<div>
    div
    
    <h1>div h1</h1>
    <p>div p</p>
</div>

<p>p</p>

E#myid ID 選擇器(ID selectors)

  • 每個 id 屬性的值在每份 HTML 網頁中都只應使用一次(可讓你非常明確地套用樣式)

選擇 <p> 元素的 id 屬性的值等於 "myid"。

p#myid {
    color: red;
}
<h1>h1</h1>

<p>p</p>

<div>div</div>

<p id="myid">p#myid</p>

<p>p</p>

E.warning Class 選擇器(Class selectors)

  • 每個 class 屬性的值可以在每份 HTML 網頁中重複使用多次(當網頁或整個網站裡有多個元素需共用相同樣式時使用)

選擇 <p> 元素的 class 屬性,可利用空白字元區隔指定多項屬性值,其中一個屬性值等於 "warning"。

p.warning {
    color: red;
}
<h1>h1</h1>

<p class="warning">p.warning</p>

<div>div</div>

<p class="info warning error">p.info.warning.error</p>

<p>p</p>

E[foo] 屬性選擇器(Attribute selectors)

選擇 <a> 元素有 target 屬性。

a[target] {
    color: red;
}
<a href="#">未指定 target 屬性</a>
<a href="#" target="_blank">target="_blank"</a>
<a href="#" target="_top">target="_top"</a>

E[foo="bar"] 屬性選擇器(Attribute selectors)

選擇 <a> 元素有 target 屬性且值等於 "_blank"。

a[target=_blank] {
    color: red;
}
<a href="#">未指定 target 屬性</a>
<a href="#" target="_blank">target="_blank"</a>
<a href="#" target="_top">target="_top"</a>

E[foo~="bar"] 屬性選擇器(Attribute selectors)

選擇 <a> 元素有 title 屬性,可利用空白字元區隔指定多項屬性值,其中一個包含屬性值 "flower"。

a[title~=flower] {
    color: red;
}
<a href="#" title="flower one two">title="flower one two"</a>
<a href="#" title="flowerone two">title="flowerone two"</a>
<a href="#" title="one flower two">title="one flower two"</a>
<a href="#" title="oneflowertwo">title="oneflowertwo"</a>
<a href="#" title="one two flower">title="one two flower"</a>
<a href="#" title="one twoflower">title="one twoflower"</a>

E[foo^="bar"] 屬性選擇器(Attribute selectors)

選擇 <a> 元素有 title 屬性且『第一個』值以 "flower"『開始』。

a[title^=flower] {
    color: red;
}
<a href="#" title="flower one two">title="flower one two"</a>
<a href="#" title="flowerone two">title="flowerone two"</a>
<a href="#" title="one flower two">title="one flower two"</a>
<a href="#" title="oneflowertwo">title="oneflowertwo"</a>
<a href="#" title="one two flower">title="one two flower"</a>
<a href="#" title="one twoflower">title="one twoflower"</a>

E[foo$="bar"] 屬性選擇器(Attribute selectors)

選擇 <a> 元素有 title 屬性且『最後一個』值以 "flower"『結束』。

a[title$=flower] {
    color: red;
}
<a href="#" title="flower one two">title="flower one two"</a>
<a href="#" title="flowerone two">title="flowerone two"</a>
<a href="#" title="one flower two">title="one flower two"</a>
<a href="#" title="oneflowertwo">title="oneflowertwo"</a>
<a href="#" title="one two flower">title="one two flower"</a>
<a href="#" title="one twoflower">title="one twoflower"</a>

E[foo*="bar"] 屬性選擇器(Attribute selectors)

選擇 <a> 元素有 title 屬性且值包含 "flower"。

a[title*=flower] {
    color: red;
}
<a href="#" title="flower one two">title="flower one two"</a>
<a href="#" title="flowerone two">title="flowerone two"</a>
<a href="#" title="one flower two">title="one flower two"</a>
<a href="#" title="oneflowertwo">title="oneflowertwo"</a>
<a href="#" title="one two flower">title="one two flower"</a>
<a href="#" title="one twoflower">title="one twoflower"</a>

E[foo|="en"] 屬性選擇器(Attribute selectors)

選擇 <p> 元素有 lang 屬性,可利用 -(連字符)區隔指定多項屬性值,包含與前方一致的『第一個』屬性值 "en"。

p[lang|=en] {
    color: red;
}
<p lang="en">lang="en"</p>
<p lang="en-us">lang="en-us"</p>
<p lang="en-gb">lang="en-gb"</p>
<p lang="us">lang="us"</p>
<p lang="zh">lang="zh"</p>

群組選擇器(Group of selectors)

有時你可能想替多個元素套用同一個樣式。例如若想將元素 <div> <p> 都設定同樣的樣式時,你可以分別撰寫規則組來選取這二個元素,不過更快且有效率的作法是將這二個元素群組起來。

E, F

  • 替多個元素套用同一個樣式

選擇 <div><p> 元素。

div, p {
    color: red;
}
<h1>h1</h1>

<div>div</div>

<p>p</p>

組合選擇器(Combinator selectors)

可讓你依據元素彼此間的關係來套用樣式,以做出更明確的選擇。

E F 後代組合器(Descendant combinator)

  • 描述的是元素的後代,適合用來替包在其他元素內的元素套用樣式

選擇在 <div> 父元素內所包含的所有後裔<p> 子元素。

div p {
    color: red;
}
<div>
    div
    
    <p>div p</p>

    <h1>
        <p>div h1 p</p>
    </h1>

    <p>div p</p>
</div>

E > F 子組合器(Child combinator)

  • (父子)繼承的概念

選擇 <div> 父元素所包含的直接第一層<p> 子元素。

div > p {
    color: red;
}
<div>
    <p>div p</p>

    <h1>
        <p>div h1 p</p>
    </h1>

    <p>div p</p>
</div>

<p>p</p>

E + F 相鄰兄弟組合器(Adjacent sibling combinator)

  • (兄弟)平行的對等概念,元素為同一層級且彼此必須直接相鄰

選擇 <div> 兄元素之後相鄰的『第一個』<p> 弟元素。

div + p {
    color: red;
}
<div>
    div

    <p>div p</p>
</div>

<h1>h1</h1>

<p>p</p>

<div>
    div

    <p>div p</p>
</div>

<p>p</p>

<p>p</p>

E ~ F 一般兄弟組合器(General sibling combinator)

  • (兄弟)平行的對等概念,因為是『一般』,元素為同一層級但不必直接相鄰

選擇 <div> 兄元素之後的『所有』<p> 弟元素。

div ~ p {
    color: red;
}
<div>
    div

    <p>div p</p>
</div>

<h1>h1</h1>

<p>p</p>

<div>
    div

    <p>div p</p>
</div>

<p>p</p>

<p>p</p>

虛擬(偽)類別(pseudo-class)

鏈接偽類與用戶操作偽類一起使用時,請注意順序。例如指定錨點 <a> 元素時,必須依照使用者的動作順序:

  1. :link
  2. :visited
  3. :hover
  4. :focus
  5. :active

虛擬(偽)類別、虛擬(偽)元素是很特殊的選擇器,樣式不是套用在元素名稱、屬性名稱和屬性值等相關部分,而是在『狀況』及『狀態』(例如游標產生作用、元素的第一個字......)下進行套用。套用樣式用的指定沒有出現在 HTML 中,就是說不是由實際的元素構成,這樣的特徵就是『虛擬(偽)(pseudo)』

網頁中偶爾會有某些部分不是由實際的元素構成,這就表示該部分無法利用一般的選擇器選取,此時虛擬(偽)類別便能派上用場。

  • 只作用在 <a> 超連結

把樣式套用於還沒訪問過的鏈接。

a:link {
    ...
}
  • 只作用在 <a> 超連結

把樣式套用於已經訪問過的鏈接。

a:visited {
    ...
}

E:hover 用戶操作偽類(The user action pseudo-classes)

把樣式套用於滑鼠懸停的元素上。

a.sample-hover:hover {
    background-color: yellow;
}
<a href="..." class="sample-hover">CSS word-break: 英、中文字斷行規則</a>

E:focus 用戶操作偽類(The user action pseudo-classes)

  • 接受鍵盤事件或其他用戶輸入的元素

選擇具有焦點的輸入元素,當輸入文字欄位 <input type="text" /> 被點選時。

input.sample-focus:focus {
    background-color: yellow;
}
<input type="text" class="sample-focus" /> 

E:active 用戶操作偽類(The user action pseudo-classes)

  • :active 必須位於 :hover 之後

在用戶操作的特定 E 元素,點擊元素時。

a.sample-active:active {
    background-color: yellow;
}
<a href="..." class="sample-active">在 HTML 中套用 CSS 的方法</a>

E:target 目標偽類(The target pseudo-class)

  • 與 URI 的片段標識符鏈接到文檔中的某個元素,被稱為目標元素
  • 一個 URI 指向一個錨點命名的第 2 節(# 符號後的字符),錨點可以是具有 id 屬性

選擇點擊超連結(錨點)連結至 <p> 元素。

p:target {
    color: red;
}
<a href="#p1">href="#p1"</a>
<a href="#p2">href="#p2"</a>

<p id="p1">

p#p1

</p> <p id="p2">

p#p2

</p>

選擇點擊超連結(錨點)顯示 <input> 元素。

#input {
  display: none;
}
#input:target {
  display: inline-block;
}
<a href="#input">href="#input"</a>
<input type="text" id="input"> 

E:root 結構性偽類(Structural pseudo-classes)

  • 在 HTML 中根元素始終是元素 <html>

選擇根元素。

:root {
    ...
}

E:nth-child(n) 結構性偽類(Structural pseudo-classes)

  • 參數 n 可以是數值、關鍵字或公式
  • 子元素『不依』元素類型計數

選擇 <p> 元素的父元素內的第 1, 2, 4 個子元素。第 2 個為 <h1> 元素,所以未被選擇。

p:nth-child(1),
p:nth-child(2),
p:nth-child(4) {
    color: red;
}
<body>

    <p>p 1</p>
    <h1>h1 2</h1>
    <p>p 3</p>
    <p>p 4</p>
    <p>p 5</p>

</body>

參數使用『關鍵字』 odd(奇數)或 even(偶數)。

p:nth-child(odd) {
    color: red;
}
p:nth-child(even) {
    color: green;
}
<body>

    <p>p 1</p>
    <p>p 2</p>
    <p>p 3</p>
    <p>p 4</p>
    <p>p 5</p>

</body>

參數使用『公式(an+b)』,a 表示周期的大小,n 是計數器(從 0 開始),b 是偏移值。這裡使用 3 的倍數。

p:nth-child(3n+0) {
    color: red;
}
<body>

    <p>p 1</p>
    <p>p 2</p>
    <p>p 3</p>
    <p>p 4</p>
    <p>p 5</p>
    <p>p 6</p>
    <p>p 7</p>
    <p>p 8</p>
    <p>p 9</p>

</body>

E:nth-last-child(n) 結構性偽類(Structural pseudo-classes)

  • 參數 n 可以是數值、關鍵字或公式
  • 子元素『不依』元素類型計數
  • 『從後往前』選擇元素

選擇 <p> 元素的父元素內的第 1, 2, 4 個子元素,但為『從後往前』選擇元素。第 4 個為 <h1> 元素,所以未被選擇。

p:nth-last-child(1),
p:nth-last-child(2),
p:nth-last-child(4) {
    color: red;
}
<body>

    <p>p 5</p>
    <h1>h1 4</h1>
    <p>p 3</p>
    <p>p 2</p>
    <p>p 1</p>

</body>

參數使用『關鍵字』 odd(奇數)或 even(偶數),但為『從後往前』選擇元素。

p:nth-last-child(odd) {
    color: red;
}
p:nth-last-child(even) {
    color: green;
}
<body>

    <p>p 5</p>
    <p>p 4</p>
    <p>p 3</p>
    <p>p 2</p>
    <p>p 1</p>

</body>

參數使用『公式(an+b)』,a 表示周期的大小,n 是計數器(從 0 開始),b 是偏移值,但為『從後往前』選擇元素。這裡使用 3 的倍數。

p:nth-last-child(3n+0) {
    color: red;
}
<body>

    <p>p 9</p>
    <p>p 8</p>
    <p>p 7</p>
    <p>p 6</p>
    <p>p 5</p>
    <p>p 4</p>
    <p>p 3</p>
    <p>p 2</p>
    <p>p 1</p>

</body>

E:nth-of-type(n) 結構性偽類(Structural pseudo-classes)

  • 子元素『依』指定 E 元素類型計數

選擇 <p> 元素的父元素內的第 1, 2, 4 個的 E 子元素,僅計算 <p> 元素,所以 <h1> 不包含在計算的順序。

p:nth-of-type(1),
p:nth-of-type(2),
p:nth-of-type(4) {
    color: red;
}
<body>

    <p>p 1</p>
    <h1>h1 1</h1>
    <p>p 2</p>
    <p>p 3</p>
    <p>p 4</p>

</body>

參數使用『關鍵字』 odd(奇數)或 even(偶數),僅計算 <p> 元素,所以 <h1> 不包含在計算的順序。

p:nth-of-type(odd) {
    color: red;
}
p:nth-of-type(even) {
    color: green;
}
<body>

    <p>p 1</p>
    <h1>h1 1</h1>  
    <p>p 2</p>
    <p>p 3</p>
    <p>p 4</p>
    <p>p 5</p>

</body>

參數使用『公式(an+b)』,a 表示周期的大小,n 是計數器(從 0 開始),b 是偏移值。這裡使用 3 的倍數,僅計算 <p> 元素,所以 <h1> 不包含在計算的順序。

p:nth-of-type(3n+0) {
    color: red;
}
<body>

    <p>p 1</p>
    <h1>h1 1</h1>  
    <p>p 2</p>
    <p>p 3</p>
    <p>p 4</p>
    <p>p 5</p>
    <p>p 6</p>
    <p>p 7</p>
    <p>p 8</p>
    <p>p 9</p>

</body>

E:nth-last-of-type(n) 結構性偽類(Structural pseudo-classes)

  • 子元素『依』指定 E 元素類型計數
  • 『從後往前』選擇元素

選擇 <p> 元素的父元素內的第 1, 2, 4 個的 E 子元素,僅計算 <p> 元素,所以 <h1> 不包含在計算的順序。

p:nth-last-of-type(1),
p:nth-last-of-type(2),
p:nth-last-of-type(4) {
    color: red;
}
<body>

    <p>p 4</p>
    <h1>h1 1</h1>
    <p>p 3</p>
    <p>p 2</p>
    <p>p 1</p>

</body>

參數使用『關鍵字』 odd(奇數)或 even(偶數),僅計算 <p> 元素,所以 <h1> 不包含在計算的順序。

p:nth-last-of-type(odd) {
    color: red;
}
p:nth-last-of-type(even) {
    color: green;
}
<body>

    <p>p 5</p>
    <h1>h1 1</h1>  
    <p>p 4</p>
    <p>p 3</p>
    <p>p 2</p>
    <p>p 1</p>

</body>

參數使用『公式(an+b)』,a 表示周期的大小,n 是計數器(從 0 開始),b 是偏移值。這裡使用 3 的倍數,僅計算 <p> 元素,所以 <h1> 不包含在計算的順序。

p:nth-last-of-type(3n+0) {
    color: red;
}
<body>

    <p>p 9</p>
    <h1>h1 1</h1>  
    <p>p 7</p>
    <p>p 6</p>
    <p>p 5</p>
    <p>p 5</p>
    <p>p 4</p>
    <p>p 3</p>
    <p>p 2</p>
    <p>p 1</p>

</body>

E:first-child 結構性偽類(Structural pseudo-classes)

  • 子元素『不依』元素類型計數

選擇 <p> 元素的父元素『第一個』子元素。

p:first-child {
    color: red;
}
<body>

    <p>p 1</p>

    <h1>h1 2</h1>
    <p>p 3</p>

    <div>
        div 4

        <p>div p 1</p>
        <p>div p 2</p>
    </div>

    <p>p 5</p>

</body>

選擇 <p> 元素的父元素『第一個』子元素的 <em> 子元素。

p:first-child em {
    color: red;
}
<body>

    <p>
        p 1

        <em>p em 1</em>
        <em>p em 2</em>
    </p>

    <p>
        p 2

        <em>p em 1</em>
        <em>p em 2</em>
    </p>

</body>

選擇 <p> 元素的父元素『第一個』子元素。

li:first-child {
    color: red;
}
<body>

    <ul>
        ul 1

        <li>ul li 1</li>
        <li>ul li 2</li>
        <li>ul li 3</li>
    </ul>

    <ul>
        ul 2

        <li>ul li 1</li>
        <li>ul li 2</li>
        <li>ul li 3</li>
    </ul>

</body>

選擇 <ul> 元素的父元素所包含的直接第一層的『第一個』子元素。

ul>:first-child {
    color: red;
}
<body>

    <ul>
        ul 1

        <li>ul li 1</li>
        <li>ul li 2</li>
        <li>ul li 3</li>
    </ul>

    <ul>
        ul 2

        <li>ul li 1</li>
        <li>ul li 2</li>
        <li>ul li 3</li>
    </ul>

</body>

E:last-child 結構性偽類(Structural pseudo-classes)

  • 子元素『不依』元素類型計數
  • 『最後一個』元素

選擇 <p> 元素的父元素『最後一個』子元素。

p:last-child {
    color: red;
}
<body>

    <p>p 5</p>

    <h1>h1 4</h1>
    <p>p 3</p>

    <div>
        div 2

        <p>div p 2</p>
        <p>div p 1</p>
    </div>

    <p>p 1</p>

</body>

選擇 <p> 元素的父元素『最後一個』子元素的 <em> 子元素。

p:last-child em {
    color: red;
}
<body>

    <p>
        p 2

        <em>p em 2</em>
        <em>p em 1</em>
    </p>

    <p>
        p 1

        <em>p em 2</em>
        <em>p em 1</em>
    </p>

</body>

選擇 <li> 元素的父元素『最後一個』子元素。

li:last-child {
    color: red;
}
<body>

    <ul>
        ul 2

        <li>ul li 3</li>
        <li>ul li 2</li>
        <li>ul li 1</li>
    </ul>

    <ul>
        ul 1

        <li>ul li 3</li>
        <li>ul li 2</li>
        <li>ul li 1</li>
    </ul>

</body>

選擇 <ul> 元素的父元素所包含的直接第一層的『最後一個』子元素。

ul>:last-child {
    color: red;
}
<body>

    <ul>
        ul 2

        <li>ul li 3</li>
        <li>ul li 2</li>
        <li>ul li 1</li>
    </ul>

    <ul>
        ul 1

        <li>ul li 3</li>
        <li>ul li 2</li>
        <li>ul li 1</li>
    </ul>

</body>

E:first-of-type 結構性偽類(Structural pseudo-classes)

  • 子元素『依』指定 E 元素類型計數

選擇 <p> 元素的父元素『第一個』 <p> 子元素。

p:first-of-type {
    color: red;
}
<body>

    <p>p 1</p>

    <h1>h1 1</h1>
    <p>p 2</p>

    <div>
        div 1

        <p>div p 1</p>
        <p>div p 2</p>
    </div>

    <p>p 3</p>

</body>

E:last-of-type 結構性偽類(Structural pseudo-classes)

  • 子元素『依』指定 E 元素類型計數
  • 『最後一個』元素

選擇 <p> 元素的父元素『最後一個』<p> 子元素。

p:last-of-type {
    color: red;
}
<body>

    <p>p 3</p>

    <h1>h1 1</h1>
    <p>p 2</p>

    <div>
        div 1

        <p>div p 2</p>
        <p>div p 1</p>
    </div>

    <p>p 1</p>

</body>

E:only-child 結構性偽類(Structural pseudo-classes)

  • 子元素『不依』元素類型
  • 『唯一』子元素

選擇 <p> 元素的父元素僅有『唯一』子元素。

p:only-child {
    color: red;
}
<p>p</p>

<div>
    div

    <p>div p</p>
</div>

<div>
    div

    <h1>div h1</h1>

    <p>div p</p>
</div>

E:only-of-type 結構性偽類(Structural pseudo-classes)

  • 子元素『依』指定 E 元素類型
  • 『唯一』子元素

選擇 <p> 元素的父元素僅有『唯一』子元素。

p:only-of-type {
    color: red;
}
<p>p</p>

<div>
    div

    <p>div p</p>
</div>

<div>
    div

    <h1>div h1</h1>

    <p>div p</p>
</div>

E:empty 結構性偽類(Structural pseudo-classes)

  • 子元素為元素節點和文本(包括空格)
  • <!-- 註解 --> 不會被認為是子元素

選擇沒有子元素的所有 .empty CLASS。

.empty {
    height: 20px;
    margin-bottom: 5px;
    width: 20px;
}
.empty:empty {
    background: green;
}
<div class="empty"></div>
<div class="empty"><!-- I will be lime --></div>
<div class="empty">div.box</div>
<div class="empty"> </div>

E:lang(fr) 語言偽類(The language pseudo-class lang)

選擇 <p> 元素有 lang 屬性且值開頭等於 zhzh-

p:lang(zh) {
    color: red;
}
<p lang="zh">lang="zh"</p>
<p lang="zh-">lang="zh-"</p>
<p lang="zh-tw">lang="zh-tw"</p>
<p lang="us">lang="it"</p>

E:enabled 在 UI 元素狀態偽類(The UI element states pseudo-classes)

  • 如果一個元素『能夠』被激活(如選擇、點擊或接受文本輸入)或獲取焦點,則該元素是啟用的。

選擇 <input> UI(User Interface 使用者介面)為啟用的元素。

input:enabled {
    color: red;
}
<input type="text" value="enabled"> 
<input type="text" value="disabled" disabled="disabled"> 

E:disabled 在 UI 元素狀態偽類(The UI element states pseudo-classes)

  • 如果一個元素『不能』夠被激活(如選擇、點擊或接受文本輸入)或獲取焦點,則該元素處於被禁用狀態。

選擇 <input> UI(User Interface 使用者介面)為禁用的元素。

input:disabled {
    color: red;
}
<input type="text" value="enabled"> 
<input type="text" value="disabled" disabled="disabled"> 

E:checked 在 UI 元素狀態偽類(The UI element states pseudo-classes)

僅適用於可被選中的元素:

  • <input type="radio" /> 單選鈕
  • <input type="radio" /> 複選框
  • <select><option><option/><select/> 選擇列表

選擇被選中的元素。

input:checked {
    height: 30px;
    width: 30px;
}
option:checked {
    background: red;
}
<input type="radio" name="sex" value="male" checked="checked" /> 
<input type="radio" name="sex" value="female" /> 
<input type="checkbox" value="Bike" checked="checked" /> 
<input type="checkbox" value="Car" /> 


<select> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="2">3</option>
</select>

E:not(s) 否定偽類(Negation pseudo-class)

不匹配選擇 .not<p> 元素。

p:not(.not) {
    color: red;
}
<p>p</p>
<p class="not">p.not</p>
<span>span<span>

不匹配選擇的 <p> 元素。

body :not(p) {
    color: red;
}
<p>p</p>
<p class="not">p.not</p>
<span>span<span>

虛擬(偽)元素(pseudo-element)

有時你會發現虛擬(偽)元素使用了兩個冒號“::”而不是一個冒号“:”,這是 CSS3 規範中要求的一部分,目的是為了區分虛擬(偽)類和虛擬(偽)元素。不過大多數瀏覽器都支援這兩種表示方式

虛擬(偽)元素,就是指在網頁中實際有形,但並不是由某個元素定義的局部範圍,例如某個段落的第一行。

E::first-line

選擇 <p> 元素的首行(第一行)。

p:first-line {
    color: red;
}
<p>
    第一行<br />
    第二行<br />
    第三行
</p>

E::first-letter

選擇 <p> 元素的第一個字母。

p:first-letter {
    color: red;
}
<p>擇第一個字母</p>

E::first-before

選擇 <p> 元素的第一個字母。

p:first-before {
    color: red;
}
<p>擇第一個字母</p>

E::before

<p> 元素之前,使用 content: 產生內容。

p:before {
    content: "前方產生的內容";
}
<p>(原內容)</p>

E::after

<p> 元素之後,使用 content: 產生內容。

p:after {
    content: "後方產生的內容";
}
<p>(原內容)</p>

發表迴響