随着前端技术发展，技术升级，需求的不断增加，要求的提高，页面也变得越来越复杂，对技术人员的要求也相应的有了更高的要求。由于很多前端开发人员对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
- 由于目前没有浏览
