補充了一些之前遺漏掉的選擇器以及一些在 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