CSS LEVEL4

明日星空發表於2019-01-08
CSS

隨著前端技術發展，技術升級，需求的不斷增加，要求的提高，頁面也變得越來越複雜，對技術人員的要求也相應的有了更高的要求。由於很多前端開發人員對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實現，節約時間，提高效能。

來源：https://juejin.im/post/5c34722051882526205817d8

相關文章