摘要：默認選項偽類偽類會匹配那些在一組相關的集合中作為默認選項的元素。瀏覽器對和支持范圍偽類和這兩個偽類對于那些要求數據介于一個指定范圍的表單元素是非常有用的。因而應該像這樣子的注意默認值是，不在數據允許的范圍之內。

2014年1月，我寫了一篇文章：The Current Generation of CSS3 Selectors，這篇文章的目的是介紹一些CSS3中新增的選擇器。文中的選擇器已經有了很多文檔，并且也被大多數瀏覽器支持（包括IE9+）。

由于Selectors Level 4 specification 目前已是工作草案狀態，并且Editor’s Draft of the same spec也在進行中(編輯草案通常被視為更有權威)，未來的CSS選擇器看起來很明朗了，

這篇文章重點介紹沒有在之前那篇文章中出現的新選擇器。瀏覽器對這些新特性的支持并不樂觀，所以我不建議在生產環境中使用這些新選擇器。可以把這篇文章視為當規范進一步完善并且瀏覽器開始支持CSS4的時候，它會帶來什么影響。對于已經被支持的特性，我例舉了demo。

這兩個選擇器是很簡單的。任何可編輯的元素都是read-write狀態，反之，元素則是read-only狀態。看一下下面HTML:

CSS如下：

:read-only {
  outline: solid 1px blue;
}

:read-write {
  outline: solid 1px red;
}

對上述代碼的分析如下：

開始的兩個元素有藍色的外輪廓，因為在HTML中，它們分別設置了readonly和disabled。

第三個元素有紅色的外輪廓，因為它是自然的可編輯狀態(read-write)，textarea和所有的input元素的默認行為是一樣的。

最后一個元素(div)有紅色的外輪廓，因為設置了contenteditable屬性。

在CSS中，我很普通的使用了這兩個選擇器(沒有將它們應用到任何元素)，這也意味著所有的div、span和其它不可編輯元素會有紅色的外輪廓，更像被用在特定的表單元素或有特定類選擇器的元素。

:read-write可能會在編輯草案中被移除。

注意：正如下面的demo顯示，支持這些選擇器的瀏覽器將設置了disabled的input元素定義為read-write，然而根據規范，這是不正確的。

HTML:

  
Demo for :read-only and :read-write
  This input is "readonly":
  
  
 This input is "disabled":
  
  
 This input is normal:
  
  


  
This div is contenteditable
  
  
This div has nothing special.
  
  
Legend: Red outline: read-write; Blue outline: read-only
  
  
Demo by Louis Lazaris. See article.
  

CSS:

body {
  line-height: 2em;
}

.c {
  width: 600px;
  margin: auto;
}

.p {
  text-align: center;
  font-size: .9em;
  padding-top: 100px;
}

input:read-write, .ce:read-write, .ro:read-write {
  outline: solid 1px red;
}

input:read-only, .ce:read-only, .ro:read-only {
  outline: solid 1px blue;
}

View this code on codepen

:default 偽類會匹配那些在一組相關的集合中作為默認選項的元素。例如，一個表單的默認提交按鈕或一組單選按鈕中被默認選中的按鈕。

如下面的HTML片段顯示的那樣，可以有多個默認選項：

 Fruits
 Vegetables
 Meats
 Poultry
 Nuts
 Breads

將下面的CSS應用到上面的HTML：

input[type=checkbox]:default {
  outline: solid 1px hotpink;
}

在這個案例中，所有有checked屬性的元素將呈現一個外輪廓的樣式。

在這個demo中，盡管默認選中的復選框應該有一個外輪廓，但是WebKit/Blink瀏覽器不會為默認選中的復選框應用輪廓，這看起來是一個Bug。Firefox能正確呈現。

HTML:

  
Demo for :default

   Fruits
   Vegetables
   Meats
   Poultry
   Nuts
   Breads

  

    
    
  
  
  
The items with a pink outline are in the "default" state. Chrome and Opera incorrectly fail to add the pink outline to the checkboxes.
  
  
Demo by Louis Lazaris. See article.

CSS:

body {
  line-height: 2em;
}

.c {
  width: 500px;
  margin: auto;
}

.p {
  text-align: center;
  font-size: .9em;
  padding-top: 100px;
}

input[type=checkbox]:default {
  outline: solid 1px hotpink;
}

input:default {
  outline: solid 1px hotpink;
}

View this code in codepen

這兩個偽類在HTML表單中是非常有用的，它能給予用戶在輸入數據時視覺上的有效性，而這些本應該有JavaScript完成的。

看一個示例：

Email: 

注意，這個字段期待被輸入的數據時有效的郵件地址，可以這樣做：

input[type=email]:invalid {
  outline: red solid 1px;
}

input[type=email]:valid {
  outline: lightgreen solid 1px;
}

根據上面的CSS，用戶沒有輸入之前，email字段將有紅色的外輪廓，一旦用戶輸入合法的電子郵件，外輪廓會變成綠色。

用這些偽類可以很容易的在表單元素之前添加一個綠標記的偽元素（或其它類似的）來顯示有效的字段數據。

需要注意的是：

有趣的是，有效性檢測也能應用到form元素自身，來表明所有字段數據是有效的。

對div、p等普通元素不起作用，因為這些元素沒有什么方法來指定預期的數據格式。

普通且沒有要求特定數據格式的，默認是有效的，但如果設置了require屬性卻沒有數據則是無效的。

HTML:

  
Demo for :valid and :invalid

  Email: 
  
  
Type an email address. The outline will change from red to green.
  
  
Demo by Louis Lazaris. See article.

CSS:

body {
  line-height: 2em;
}

.c {
  width: 500px;
  margin: auto;
}

.p {
  text-align: center;
  font-size: .9em;
  padding-top: 100px;
}

input[type=email]:invalid {
  outline: red solid 2px;
}

input[type=email]:valid {
  outline: lightgreen solid 2px;
}

View this code on codepen

這兩個偽類對于那些要求數據介于一個指定范圍的表單元素是非常有用的。你可以根據元素數據是否在指定范圍之內來設計輸入框樣式。

因而HTML應該像這樣子的：

注意默認值是"1993-01-01"，不在數據允許的范圍之內。你可以根據默認數據和輸入的數據來動態地設計輸入框樣式，像這樣：

input[type=date]:in-range {
  outline: lightgreen solid 1px;
}

input[type=date]:out-of-range {
  outline: red solid 1px;
}

需要注意的是：

能應用于number, datetime, datetime-local, month, week及其它允許范圍的輸入

支持range，但我不認為有一種方法能使range元素的數據超出范圍，這種情況下，使用這兩個偽類的作用是非常有限的。

和其它偽類一樣，此偽類僅作用在有能力定義可接受的數據范圍的元素

瀏覽器對 :in-range 和 :out-of-range支持：Chrome, Opera, Firefox, Safari.

HTML:

  
Demo for :in-range and :out-of-range

  

  
This date field expects a date between "1994-01-01" and "2015-03-01". Change to a valid date to see the outline switch from red to green.

  
Demo by Louis Lazaris. See article.

CSS:

body {
  line-height: 2em;
}

.c {
  width: 500px;
  margin: auto;
}

.p {
  text-align: center;
  font-size: .9em;
  padding-top: 100px;
}

input[type=date]:in-range {
  outline: lightgreen solid 1px;
}

input[type=date]:out-of-range {
  outline: red solid 1px;
}

View this code on codepen

這兩個偽類能讓你基于表單字段是否需要填寫來設計表單元素的樣式。拿下面的HTML為例：

  name:
  
  


  Email:
  
  


  Address:
  
  

每個input后面添加了一個空的span元素，同時前面兩個input元素是比填的，第三個是非必填的。CSS如下：

input:required ~ .msg:after {
  content: "*";
  color: red;
}

input:optional ~ .msg:after {
  content: "(optional)";
}

在這個示例中，我用兄弟選擇器在緊跟每個必填字段的后面添加一個紅色星號，非必填字段后添加 “optional”。

示例中使用了我額外添加的元素。如果你不喜歡，可以使用JavaScript動態添加或直接在input元素上使用其他樣式，但是不能對表單的input元素使用偽類了，因而這種情況下你必須應用不同的樣式。

HTML:

  
Demo for :required and :optional

  

    Name:
    
    
  
  

    Email:
    
    
  
  

    Address:
    
    
  

  
The red asterisks and "(optional)" text are added via CSS, based on the presence or absence of the required attribute.

  
Demo by Louis Lazaris. See article.

CSS:

body {
  line-height: 2em;
}

.c {
  width: 500px;
  margin: auto;
}

.p {
  text-align: center;
  font-size: .9em;
  padding-top: 100px;
}

form div {
  padding: 10px;
}

input:required ~ .msg:after {
  content: "*";
  color: red;
}

input:optional ~ .msg:after {
  content: "(optional)";
}

View this code on codepen

在CSS中，默認對屬性的大小寫是敏感的。例如，要選擇所有href屬性的值以pdf結尾的元素，就不會選中其屬性值以PDF結尾的。有一個很有用的新標記可以被添加到屬性選擇器中來覆蓋這種行為：

a[href$="pdf" i] {
  color: red;
}

現在屬性選擇器將選擇所有href鏈接到PDF文件的元素，不管.pdf擴展名是小寫、大寫還是混合寫的。

HTML:

  
Demo for case-insensitive attribute selectors

  

    
example.pdf
    
example.PDF
    
example.Pdf
  
    

  
In non-supporting browsers, only the first link is red. In supporting browsers, all links are red.

  
Demo by Louis Lazaris. See article.

CSS:

body {
  line-height: 2em;
}

.c {
  width: 500px;
  margin: auto;
}

.p {
  text-align: center;
  font-size: .9em;
  padding-top: 100px;
}

form div {
  padding: 10px;
}

a[href$="pdf"] {
  color: red;
}

a[href$="pdf" i] {
  color: red;
}

View this code on codepen

[:blank]偽類和:empty有點類似，在The Current Generation of CSS3 Selectors一文中介紹了empty的用法。用empty可以選擇沒有子元素的元素，不管其子元素是一個元素、文本節點還是空白節點，因此如果元素即使只包含一個空格，也不被認為是"empty"的。

然而，:blank偽類將選擇沒有文本和其它子元素，包含空白的元素，它能包含空白、換行符等，這依然是有合格的。

HTML如下 :

第一個段落是完全的空元素，但第二個有一個空白字符。CSS如下：

p:blank {
  outline: solid 1px red;
}

p:empty {
  border: solid 1px green;
}

在這個示例中，對“blank”元素應用了紅色的外輪廓，對 “empty”元素應用了綠色的邊框。:empty僅選擇第一個段落，因為它是完全的空元素；:blank則選擇兩個段落。

可能很難記住二者的差別，因為名字很相似，規范中也記錄了一些問題，這個選擇器可能會更名。

:matches()偽類是使選擇分組更簡潔的一種方式，當瀏覽器對其的支持情況得到改善時，是對規范很有用的一個補充。

在MDN的一個示例中，CSS如下：

section section h1, section article h1,
section aside h1, section nav h1,
article section h1, article article h1, 
article aside h1, article nav h1,
aside section h1, aside article h1,
aside aside h1, aside nav h1,
nav section h1, nav article h1, 
nav aside h1, nav nav h1, {
  font-size: 20px;
}

用:matches()，能將其簡化：

:matches(section, article, aside, nav)
:matches(section, article, aside, nav) h1 {
  font-size: 20px;
}

簡化的版本可以解釋為：對這四個元素，如果h1在任意一個之內，并在任何相同的四個元素之內，則應用后面的規則。

需要注意的是：

以往的規范中是使用:any，需要添加-moz-和-webkit-私有前綴。

正如CSS-Tricks指出的，原則同選擇器在預處理器中的嵌套規則。

該選擇器的參數必須是一個”簡單選擇器“(不能是一個偽元素；除了子節點，不能使用連接符)

:has() 偽類類似于JQuery中的.has()方法，但前者有更廣泛的能力。看一個示例就清楚了。注意代碼中的注釋，它解釋了每一個示例選擇什么元素。

/* Section elements that contain a footer */
section:has(footer) {
  background: #ccc;
}

/* Any element containing a p element with a class of "alert" */
:has(p.alert) {
  background-color: red;
}

/* img element with paragraph immediately following. */
img:has(+p) {
  color: red;
}

/* list item with ul as a direct child */
li:has(> ul) {
  color: red;
}

注意，:has()存在編輯草案中而不是工作草案中；也正如Ralph在評論中指出的那樣，這個選擇器僅能通過JavaScript才可用(類似querySelectorAll)，而不是CSS。規范說明

:any-link選擇器是為任何具有href屬性指定樣式的快捷方式，包括a、area和link元素等，也能按照下面的方式使用：

:link, :visited {
  color: #555;
}

作為代替，應該這樣寫：

:any-link {
  color: #555;
}

需要注意的是，在工作草案中有一個:local-link偽類，已經在編輯草案中被移除。

這是一個有趣的選擇器,我可以明確地看到它是有用的。:focus-within不僅會選擇獲得焦點的元素，還會選擇其父元素。

示例的HTML:

  Email:
  

CSS如下：

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

這不僅會導致獲得焦點的input元素有黃色的外輪廓，其父元素div也有同樣的外輪廓。

在APPs中，拖放是很基礎但又重要的功能。這兩個選擇器在改善用戶體驗上是很有價值的。
:drop選擇器可以設置放置區樣式（將要防止被拖動元素的地方），元素在用戶的拖動期間是可放置的。

.spot {
  background: #ccc;
}

.spot:drop {
  background: hotpink;
}

用戶沒有拖動時，.spot元素會有一個灰色背景；但當用戶開始拖動.spot元素時，其背景色會改變，直到元素被放下。

:drop() 的值為下列中的一個或多個關鍵字：

active:為被拖動的元素顯示當前的放置目標

valid:顯示與被拖動元素相關聯的放置目標是否有效

invalid:和前一個相反，如果與被拖動元素相關聯的放置目標無效則為其應用樣式

應用多關鍵字將讓事情更具體，如果沒有給予參數，其行為和:drop一樣。

注意：

工作草案規范有一組完全不同與此的偽類，因此這些選擇器仍在變化中

drop()是有"危險的"，有可能被移除

除了上面提到的，還有一些新特性我不打算細講，但也值得簡單提一下：
* 列連接符（||）:用于定義table和grid中的列和單元格之間的關系
* :nth-column()和:nth-last-column()偽類用于指定table和grid中的特定列
* attr()：屬性節點選擇器，是第一個非元素選擇器
* 后代選擇器由>>代替（而不僅是一個空格字符）
* :user-error偽類：為用戶輸入的數據不正確的文本框設置樣式
* @namespace：定義命名空間
* :dir()偽類：根據方向來選擇元素（如ltr）
* :scope偽類：為選擇元素提供一個作用域或引用點
* :current, :past, 和 :future偽類：定義目標元素在時間進程上的樣式，如一個視頻字幕。
* :placeholder-shown偽類：定義表單元素中placeholder值不為空的input元素的樣式

正如之前提到的，這些功能非常新，并沒有被很好的支持，僅展示了瀏覽器支持的信息和demos。

為了跟上進展，這里有一些關于CSS 4的資源：

Selectors Level 4 Working Draft

Selectors Level 4 Editor’s Draft

CSS4 Rocks

CSS4-Selectors

Selectors Test

譯文出處：http://www.ido321.com/1590.html

  
本文根據@Louis Lazaris的《The Future Generation of CSS Selectors: Level 4》所譯，整個譯文帶有我自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處：http://www.sitepoint.com/future-generation-css-selectors-level-4/