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实现，节约时间，提升性能。