精通 CSS 選擇器（二）

補充了一些以前遺漏掉的選擇器以及一些在 Selectors Level 4 中新定義的選擇器。

屬性選擇器不區分大小寫

[attribute="value" i]，在 Selectors Level 4 中加強了屬性選擇器，添加一個 i 標識，讓屬性大小寫再也不敏感，例如 a[href$=".pdf" i]：

<a href="a.pdf">屬性值是小寫字母會被選中</a>
<a href="b.PDF">屬性值是大寫字母也會被選中，若是沒有添加 i 標識則該元素不會被選中</a>

支持的瀏覽器：Chrome/Opera, Firefox, Safari

任意匹配僞類

:matches(selector...)，選擇匹配任意選擇器參數的元素，例如：

section h1, article h1, aside h1 {
  color: red;
}

使用該僞類能夠寫成：

:matches(section, article, aside) h1 {
  color: red;
}

做用是簡化代碼。

支持的瀏覽器：Chrome/Opera(:-webkit-any), Firefox(:-moz-any), Safari

Chrome/Opera/Firefox 用 any 替代 matches 實現。

連接僞類

:any-link，選擇全部連接：

a:any-link {
  font-size: 2em;
}

支持的瀏覽器：Chrome/Opera(:-webkit-any-link), Firefox(:-moz-any-link)

不肯定狀態僞類

:indeterminate，該僞類目前有如下3種狀況：

1.選擇一組單選框，其中沒有任何一個單選框是 :checked 狀態，例如：

<input name="sex" type="radio" value="0">
<input name="sex" type="radio" value="1">

設置一個紅色輪廓線，

input[type="radio"]:indeterminate {
  outline: 1px solid red;
}

當改變一組單選框中任意一個單選框爲 :checked 狀態時，該僞類失效。

支持的瀏覽器：Chrome/Opera

2.選擇 indeterminate DOM 屬性爲 true 的複選框，例如：

<input name="favorite" type="checkbox" value="apple">

設置一個紅色輪廓線，

input[type="checkbox"]:indeterminate {
  outline: 1px solid red;
}

用 JavaScript 改變元素的 indeterminate 屬性值：

document.getElementsByTagName('input')[0].indeterminate = true;

點擊複選框改變其狀態時，該僞類失效。

支持的瀏覽器：Chrome/Opera

3.選擇不肯定狀態的 progress 元素，例如 progress:indeterminate：

<progress max="100"></progress> <!-- 會被選中 -->
<progress max="100" value="50"></progress> <!-- 不會被選中 -->

支持的瀏覽器：Chrome/Opera, Firefox, IE 10, Safari

默認選項僞類

:default，選擇一組類似元素中默認的元素，例如：

:default {
  outline: 1px solid red;
}

能夠選中默認狀態爲 :checked 的單選框和複選框，具備 selected 屬性的 <option> 元素，表單默認的提交按鈕，

<form action="#" mthod="post">
  <input checked name="favourite" type="checkbox" value="apple"> <!-- 會被選中 -->
  <input name="favourite" type="checkbox" value="orange"> <!-- 不會被選中 -->

  <input name="sex" type="radio" value="0"> <!-- 不會被選中 -->
  <input checked name="sex" type="radio" value="1"> <!-- 會被選中 -->

  <button type="submit">Submit1</button> <!-- 會被選中 -->
  <button type="submit">Submit2</button> <!-- 不會被選中 -->
</form>

支持的瀏覽器：Chrome/Opera, Firefox, Safari

校驗僞類

:valid 和 :invalid，該僞類除了能夠選擇輸入類元素也能夠選擇 form 元素，因此能夠分爲兩種狀況：

1.:valid 選擇值經過校驗的輸入元素，:invalid 選擇值未經過校驗的輸入元素，例如：

input:valid {
  border: 1px solid green;
}

input:invalid {
  border: 1px solid red;
}

值經過校驗的元素顯示綠色邊框，值未經過校驗的元素顯示紅色邊框：

<input type="email" value="x@y.z"> <!-- 綠色邊框 -->
<input type="email" value="xyz"> <!-- 紅色邊框 -->

如圖：

支持的瀏覽器：Chrome/Opera, Firefox, IE 10, Safari

2.:valid 選擇內部全部輸入元素都經過校驗的 form 元素，:invalid 選擇內部至少有一個輸入元素未經過校驗的 form 元素

示例，當表單內部有輸入元素未經過校驗時隱藏提交按鈕，全部元素都經過校驗時則顯示提交按鈕：

<form action="#" mthod="post">
  <input name="email" required type="email">
  <input name="password" required type="password">

  <button type="submit">Submit</button>
</form>

樣式：

form:invalid button[type="submit"] {
  display: none;
}

form:valid button[type="submit"] {
  display: inline-block;
}

支持的瀏覽器：Chrome/Opera, Firefox, Safari

:in-range 和 :out-of-range

:in-range 選擇值在可選範圍內的數值日期輸入元素，:out-of-range 選擇值在可選範圍外的數值日期輸入元素，例如：

input:in-range {
  outline: 1px solid green;
}

input:out-of-range {
  outline: 1px solid red;
}

值在範圍內的元素顯示綠色輪廓，值在範圍外的元素顯示紅色輪廓：

<input max="10" min="1" type="number" value="9"> <!-- 綠色輪廓 -->
<input max="10" min="1" type="range" value="9"> <!-- 綠色輪廓 -->
<input max="10" min="1" type="number" value="11"> <!-- 紅色輪廓 -->
<input max="2016-05-07" min="2016-05-05" type="date" value="2016-05-08"> <!-- 紅色輪廓 -->

如圖：

:in-range 是 :valid 的一種特例，:out-of-range 是 :invalid 的一種特例。

支持的瀏覽器：Chrome/Opera, Firefox, Edge, Safari

Optionality 僞類

:required 和 :optional

:required 選擇全部設置了 required 屬性的 input, textarea, select 等表單元素，:optional 選擇全部沒有 required 屬性的 input, textarea, select 等表單元素，例如：

input[type="text"]:required {
  border: 1px solid red;
}

input[type="text"]:optional {
  border: 1px solid #ccc;
}

將必填的文本框顯示爲紅色邊框：

<input required type="text"> <!-- 必填，紅色邊框 -->
<input type="text"> <!-- 非必填，灰色邊框 -->

如圖：

支持的瀏覽器：Chrome/Opera, Firefox, IE 10+, Safari

Mutability 僞類

:read-only 和 :read-write

:read-only 選擇狀態爲只讀的元素，:read-write 選擇狀態可讀寫的元素，例如：

:read-write {
  border: 1px solid green;
}

:read-only {
  background-color: #eee;
}

<input readonly type="text"> <!-- 只讀，灰色背景 -->
<input type="text"> <!-- 可讀寫，綠色邊框 -->

<p contenteditable>可讀寫，綠色邊框</p>
<p>只讀，灰色背景</p>

:read-only 僞類和 [readonly] 屬性選擇器是不同的。

支持的瀏覽器：Chrome/Opera, Firefox(:-moz-read-only, :-moz-read-write), Edge, Safari

結構僞類

:nth-child(n of selector)，選擇同級元素中第 n 個知足參數選擇器的元素，其中 n 能夠是天然數，也能夠是公式或者關鍵詞，和 Selectors Level 3 中定義的同樣，例如：

li:nth-child(2 of .important) {
  background-color: yellow;
}

選擇同級中第 2 個具備 important 類的 li 元素，

<ul>
  <li>不會被選中</li>
  <li class="important">不會被選中</li>
  <li>不會被選中</li>
  <li>不會被選中</li>
  <li class="important">會被選中</li>
</ul>

若是這樣寫：

li.important:nth-child(2) {
  background-color: yellow;
}

該選擇器選擇的是同級中第 2 個同時具備 important 類的 li 元素：

<ul>
  <li>不會被選中</li>
  <li class="important">會被選中</li>
  <li>不會被選中</li>
  <li>不會被選中</li>
  <li class="important">不會被選中</li>
</ul>

:nth-last-child(n of selector)，同上，只是倒着數。

支持的瀏覽器：Safari

否認僞類

:not(selector...)，在 Selectors Level 3 中否認僞類只能傳入簡單的選擇器參數，在 Selectors Level 4 中加強了參數，能夠給參數傳入一個選擇器列表，用於選擇不匹配全部選擇器參數列表的元素，參數之間用逗號分隔，例如 p:not(.foo, .bar)，選擇全部類不爲 foo 同時也不爲 bar 的 p 元素：

<p class="foo bar">不會被選中</p>
<p class="foo">不會被選中</p>
<p class="bar">不會被選中</p>
<p>會被選中</p>

該選擇器的效果等同於 p:not(.foo):not(.bar)。

支持的瀏覽器：Safari

關係僞類

:has(selector...)，選擇知足參數給定條件的元素，例如：

header:has(h1) {
  background-color: blue;
}

選擇內部含有 h1 元素的 header 元素，

<header>
  會被選中
  <h1>標題</h1>
</header>

<header>
  不會被選中
  <h2>標題</h2>
</header>

該僞類具備很強大的功能，更多示例：

/* 選擇內部不含有 h1 元素的 header 元素 */
header:not(:has(h1)) {
  background-color: yellow;
}

/* 選擇同級緊鄰元素是 span 的 h2 元素 */
h2:has(+ span) {
  font-size: 2em;
}

/* 選擇含有 img 子元素的 a 元素 */
a:has(> img) {
  border: 1px solid #ccc;
}

支持的瀏覽器：暫無

焦點僞類

:focus-within，選擇內部元素得到焦點的元素，例如：

<div class="item">
  <label for="email">Email:</label>
  <input id="email" type="text">
</div>

樣式：

:focus-within {
  outline: 1px solid yellow;
}

當輸入框得到焦點的時候，會應用上面的樣式，同時，其父元素也會應用上面的樣式。

支持的瀏覽器：暫無

方向性僞類

:dir()，選擇特定書寫方向的元素，例如：

:dir(ltr) {
  color: red;
}

:dir(rtl) {
  color: blue;
}

從左向右書寫的文字顯示爲紅色，從右向左書寫的文字顯示爲藍色：

<div dir="rtl">
  <span>藍色</span>
  <div dir="ltr">紅色
    <div dir="auto">紅色</div>
  </div>
</div>

支持的瀏覽器：Firefox(:-moz-dir)

全屏僞類

:fullscreen，選擇處於全屏顯示狀態下的元素，例如：

p:fullscreen {
  font-size: 200%;
}

全屏顯示時段落文本大小爲普通時的兩倍。

支持的瀏覽器：Chrome/Opera(:-webkit-full-screen), Firefox(:-moz-full-screen), IE 11(:-ms-fullscreen), Safari(:-webkit-full-screen)

佔位符僞元素和佔位符顯示僞類

::placeholder，選擇佔位符僞元素，例如：

<input name="username" placeholder="Please enter your name" type="text">

樣式：

::placeholder {
  color: #999;
}

支持的瀏覽器：Chrome/Opera(::-webkit-input-placeholder), Firefox(::-moz-placeholder), IE10(:-ms-input-placeholder), Edge(::-ms-input-placeholder), Safari(::-webkit-input-placeholder)

:placeholder-shown，選擇當前正在顯示佔位符的元素，例如：

<input name="username" placeholder="Please enter your name" type="text">

樣式：

input:placeholder-shown {
  border: 1px solid red;
}

如圖：

支持的瀏覽器：Chrome/Opera, Safari

參考資料

• Selectors Level 4
• CanIuse