CSS LEVEL4

隨着前端技術發展，技術升級，需求的不斷增長，要求的提升，頁面也變得愈來愈複雜，對技術人員的要求也相應的有了更高的要求。因爲不少前端開發人員對css的不重視，不瞭解css的新特性，把不少簡單的問題複雜化。如今帶你們來領略一下最新版css level4的新特性。

1 :not(s1, s2, ...)

• 樣式應用於未經過參數選擇的元素
• :not()僞類最先出如今CSS3，在CSS3中，:not選擇器只容許1個選擇器做爲參數。在4級選擇器中，它能夠將選擇器列表做爲參數。

兼容性：

Chrome	Firefox	Safari	IE	Edge
no	no	yes	no	no

用法

:not(.not, .on, .active) {
    
}
複製代碼

• 注：safari在蘋果電腦上能夠兼容，在window上的實測不兼容

2 :matches(s1 ,s2, ....)

• 樣式應用於經過參數選擇的元素，與not恰好相反

兼容性：

Chrome	Firefox	Safari	IE	Edge
no	no	yes	no	no

用法

:matches(s1, s2, ...) {
     /*  兼容 Safari 寫法
}
:-webkit-any(.not, .on, .active) {
    /*  兼容 Chrome 和 Opera 寫法
}
:-moz-any(s1, s2, ...) { 
    /* 兼容 Firefox 寫法 */ 
}
複製代碼

3 :has(rs1, rs2, ...)

• 與樣式應用於經過參數選擇的元素,和 :matches 相似，不一樣的是以屬性選擇器爲列表，同時在屬性中能夠嵌套其它選擇器

兼容性：

Chrome	Firefox	Safari	IE	Edge
no	yes	no	no	no

用法

:has(+img) {
  
}
：has(h1, h2, h3) {
  
}
:has(span.urgent) {
  
}
:has(li:not(li:nth-child(5))) {
    background: gray;
}
複製代碼

4 E[foo="bar" i]

• 匹配指定屬性等於任意大小寫組合值的任何元素(i 添加 i 表示屬性不區分大小寫，不添加的話須要徹底匹配，爲level 3的用法)

兼容性：

Chrome	Firefox	Safari	IE	Edge
yes	yes	yes	no	yes

用法

input[form="text" i] {
    
}
複製代碼

5 :dir(ltr/rtl)

• 基於方向性的元素，由文檔語言決定。

兼容性：

Chrome	Firefox	Safari	IE	Edge
yes	yes	yes	no	no

用法

:dir(ltr) {
    
}
:dir(rtl) {
    
}
複製代碼

6 :lang(*-CA)

• 該屬性最先出如今level2中，關於level2的使用請自行查閱資料。
• 因爲目前沒有瀏覽器支持，故在此就不說明，以避免誤導

7 :any-link

• 只能做爲（具備href屬性的元素）使用。

兼容性：

Chrome	Firefox	Safari	IE	Edge
-webkit	-moz	-webkit	no	no

用法

:-webkit-any-link {
    
}
:-moz-any-link {
    
}
複製代碼

8 :current / :past / :future

• 因爲目前沒有瀏覽器支持，故在此就不說明，以避免誤導

9 :drop

• 因爲目前沒有瀏覽器支持，故在此就不說明，以避免誤導

10 :indeterminate

• 匹配值處於不肯定狀態的UI元素(通常做用於radio和checxbox )。

兼容性：

Chrome	Firefox	Safari	IE	Edge
yes	yes	yes	yes	yes

用法

:indeterminate {
    
}
複製代碼

11 :default

• 匹配在元素中全部默認的UI元素。

兼容性：

Chrome	Firefox	Safari	IE	Edge
yes	yes	yes	no	no

用法

:default {
    
}
複製代碼

12 :valid / :invalid

• 元素內容是否符合規定的格式，符合爲valid 不符合爲invalid

兼容性：

Chrome	Firefox	Safari	IE	Edge
yes	yes	yes	yes	yes

用法

:valid { 
    
}
:invalid { 
    
}
複製代碼

13 :in-range / :out-of-range

• 只做用於能指定區間值的元素
• 沒法選擇任何其餘沒有數據範圍限制或不是表單控件元素的元素
• 能夠同時和其餘選擇器一塊兒連用

兼容性：

Chrome	Firefox	Safari	IE	Edge
yes	yes	yes	no	yes

用法

:in-range {
    
}
:out-of-range {
    
}
複製代碼

14 :required / :optional

• 設置容許指定required屬性的元素.
• required爲指定required的元素
• optional爲未指定required的元素
• 可設置的元素有input select texteara
• button在chrome中支持optional，不支持required ，其餘瀏覽器都不支持

兼容性：

Chrome	Firefox	Safari	IE	Edge
yes	yes	yes	yes	yes

用法

:required {
   
}
:optional {
   
}
複製代碼

15 :read-only / :read-write

• 指定是否處於只讀狀態的元素
• :read-only爲只讀狀態
• :read-write爲非只讀狀態
• 因爲大部分元素具備只讀屬性，建議不要全局使用

兼容性：

Chrome	Firefox	Safari	IE	Edge
yes	-moz	yes	no	no

用法

:read-only { 
    
}
:read-write {
    
}
:-moz-read-only { 
    /* 兼容 Firefox 寫法 */ 
}
:-moz-read-write { 
    /* 兼容 Firefox 寫法 */
}
複製代碼

16 :placeholder-shown

• 設置輸入框的placeholder內容顯示時的樣式

兼容性：

Chrome	Firefox	Safari	IE	Edge
yes	-moz	yes	no	no

用法

:placeholder-shown {
    
}
複製代碼

詳情可查看張鑫旭大佬的文章

17 :blank

• 選擇爲空的元素 與level3 :empty相似
• 與:empty相比:blank更增強大和靈活，能夠識別空格

兼容性：

Chrome	Firefox	Safari	IE	Edge
no	-moz	no	no	no

用法

:-moz-only-whitespace { 
    /* 兼容 Firefox 寫法 */ 
}
複製代碼

18 E >> F

• 因爲目前沒有瀏覽器支持，故在此就不說明，以避免誤導

19 :column(selector) / :nth-column(n) / :nth-last-column(n)

• 因爲目前沒有瀏覽器支持，故在此就不說明，以避免誤導

20 :user-invalid

• 因爲目前沒有瀏覽

總結

css的每一次的標準的出現，都會帶來一次大的變革，帶來革命性的變化。幫助你們完成更多更復雜的效果，避免經過javascript實現，節約時間，提升性能。