摘要：默認(rèn)選項(xiàng)偽類偽類會(huì)匹配那些在一組相關(guān)的集合中作為默認(rèn)選項(xiàng)的元素。瀏覽器對(duì)和支持范圍偽類和這兩個(gè)偽類對(duì)于那些要求數(shù)據(jù)介于一個(gè)指定范圍的表單元素是非常有用的。因而應(yīng)該像這樣子的注意默認(rèn)值是，不在數(shù)據(jù)允許的范圍之內(nèi)。

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

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

這篇文章重點(diǎn)介紹沒有在之前那篇文章中出現(xiàn)的新選擇器。瀏覽器對(duì)這些新特性的支持并不樂觀，所以我不建議在生產(chǎn)環(huán)境中使用這些新選擇器?？梢园堰@篇文章視為當(dāng)規(guī)范進(jìn)一步完善并且瀏覽器開始支持CSS4的時(shí)候，它會(huì)帶來什么影響。對(duì)于已經(jīng)被支持的特性，我例舉了demo。

這兩個(gè)選擇器是很簡單的。任何可編輯的元素都是read-write狀態(tài)，反之，元素則是read-only狀態(tài)?？匆幌孪旅鍴TML:

CSS如下：

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

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

對(duì)上述代碼的分析如下：

開始的兩個(gè)元素有藍(lán)色的外輪廓，因?yàn)樵贖TML中，它們分別設(shè)置了readonly和disabled。

第三個(gè)元素有紅色的外輪廓，因?yàn)樗亲匀坏目删庉嫚顟B(tài)(read-write)，textarea和所有的input元素的默認(rèn)行為是一樣的。

最后一個(gè)元素(div)有紅色的外輪廓，因?yàn)樵O(shè)置了contenteditable屬性。

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

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

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

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 偽類會(huì)匹配那些在一組相關(guān)的集合中作為默認(rèn)選項(xiàng)的元素。例如，一個(gè)表單的默認(rèn)提交按鈕或一組單選按鈕中被默認(rèn)選中的按鈕。

如下面的HTML片段顯示的那樣，可以有多個(gè)默認(rèn)選項(xiàng)：

 Fruits
 Vegetables
 Meats
 Poultry
 Nuts
 Breads

將下面的CSS應(yīng)用到上面的HTML：

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

在這個(gè)案例中，所有有checked屬性的元素將呈現(xiàn)一個(gè)外輪廓的樣式。

在這個(gè)demo中，盡管默認(rèn)選中的復(fù)選框應(yīng)該有一個(gè)外輪廓，但是WebKit/Blink瀏覽器不會(huì)為默認(rèn)選中的復(fù)選框應(yīng)用輪廓，這看起來是一個(gè)Bug。Firefox能正確呈現(xiàn)。

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

這兩個(gè)偽類在HTML表單中是非常有用的，它能給予用戶在輸入數(shù)據(jù)時(shí)視覺上的有效性，而這些本應(yīng)該有JavaScript完成的。

看一個(gè)示例：

Email: 

注意，這個(gè)字段期待被輸入的數(shù)據(jù)時(shí)有效的郵件地址，可以這樣做：

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

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

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

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

需要注意的是：

有趣的是，有效性檢測(cè)也能應(yīng)用到form元素自身，來表明所有字段數(shù)據(jù)是有效的。

對(duì)div、p等普通元素不起作用，因?yàn)檫@些元素沒有什么方法來指定預(yù)期的數(shù)據(jù)格式。

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

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

這兩個(gè)偽類對(duì)于那些要求數(shù)據(jù)介于一個(gè)指定范圍的表單元素是非常有用的。你可以根據(jù)元素?cái)?shù)據(jù)是否在指定范圍之內(nèi)來設(shè)計(jì)輸入框樣式。

因而HTML應(yīng)該像這樣子的：

注意默認(rèn)值是"1993-01-01"，不在數(shù)據(jù)允許的范圍之內(nèi)。你可以根據(jù)默認(rèn)數(shù)據(jù)和輸入的數(shù)據(jù)來動(dòng)態(tài)地設(shè)計(jì)輸入框樣式，像這樣：

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

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

需要注意的是：

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

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

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

瀏覽器對(duì) :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

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

  name:
  
  


  Email:
  
  


  Address:
  
  

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

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

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

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

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

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中，默認(rèn)對(duì)屬性的大小寫是敏感的。例如，要選擇所有href屬性的值以pdf結(jié)尾的元素，就不會(huì)選中其屬性值以PDF結(jié)尾的。有一個(gè)很有用的新標(biāo)記可以被添加到屬性選擇器中來覆蓋這種行為：

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

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

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有點(diǎn)類似，在The Current Generation of CSS3 Selectors一文中介紹了empty的用法。用empty可以選擇沒有子元素的元素，不管其子元素是一個(gè)元素、文本節(jié)點(diǎn)還是空白節(jié)點(diǎn)，因此如果元素即使只包含一個(gè)空格，也不被認(rèn)為是"empty"的。

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

HTML如下 :

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

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

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

在這個(gè)示例中，對(duì)“blank”元素應(yīng)用了紅色的外輪廓，對(duì) “empty”元素應(yīng)用了綠色的邊框。:empty僅選擇第一個(gè)段落，因?yàn)樗峭耆目赵兀?b>:blank則選擇兩個(gè)段落。

可能很難記住二者的差別，因?yàn)槊趾芟嗨?，?guī)范中也記錄了一些問題，這個(gè)選擇器可能會(huì)更名。

:matches()偽類是使選擇分組更簡潔的一種方式，當(dāng)瀏覽器對(duì)其的支持情況得到改善時(shí)，是對(duì)規(guī)范很有用的一個(gè)補(bǔ)充。

在MDN的一個(gè)示例中，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;
}

簡化的版本可以解釋為：對(duì)這四個(gè)元素，如果h1在任意一個(gè)之內(nèi)，并在任何相同的四個(gè)元素之內(nèi)，則應(yīng)用后面的規(guī)則。

需要注意的是：

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

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

該選擇器的參數(shù)必須是一個(gè)”簡單選擇器“(不能是一個(gè)偽元素；除了子節(jié)點(diǎn)，不能使用連接符)

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

/* 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在評(píng)論中指出的那樣，這個(gè)選擇器僅能通過JavaScript才可用(類似querySelectorAll)，而不是CSS。規(guī)范說明

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

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

作為代替，應(yīng)該這樣寫：

:any-link {
  color: #555;
}

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

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

示例的HTML:

  Email:
  

CSS如下：

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

這不僅會(huì)導(dǎo)致獲得焦點(diǎn)的input元素有黃色的外輪廓，其父元素div也有同樣的外輪廓。

在APPs中，拖放是很基礎(chǔ)但又重要的功能。這兩個(gè)選擇器在改善用戶體驗(yàn)上是很有價(jià)值的。
:drop選擇器可以設(shè)置放置區(qū)樣式（將要防止被拖動(dòng)元素的地方），元素在用戶的拖動(dòng)期間是可放置的。

.spot {
  background: #ccc;
}

.spot:drop {
  background: hotpink;
}

用戶沒有拖動(dòng)時(shí)，.spot元素會(huì)有一個(gè)灰色背景；但當(dāng)用戶開始拖動(dòng).spot元素時(shí)，其背景色會(huì)改變，直到元素被放下。

:drop() 的值為下列中的一個(gè)或多個(gè)關(guān)鍵字：

active:為被拖動(dòng)的元素顯示當(dāng)前的放置目標(biāo)

valid:顯示與被拖動(dòng)元素相關(guān)聯(lián)的放置目標(biāo)是否有效

invalid:和前一個(gè)相反，如果與被拖動(dòng)元素相關(guān)聯(lián)的放置目標(biāo)無效則為其應(yīng)用樣式

應(yīng)用多關(guān)鍵字將讓事情更具體，如果沒有給予參數(shù)，其行為和:drop一樣。

注意：

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

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

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

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

為了跟上進(jìn)展，這里有一些關(guān)于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

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