css4激动人心的新特性及浏览器支持度

CSS3的选择器提供了不少像:nth-child这样有用的选择器，而且获得浏览器支持。CSS的第四代 选择器CSS4选择器），经咱们带来了更多有用的选择器。

 

---

1.否认伪类:not

否认伪类选择器其实在CSS3选择器中就出现了，只不过CSS4选择器对否认伪类选择器升级了。在CSS3中，你能够经过否认伪类选择器不去选中你不须要用到的CSS样式的元素。好比说，你想除了.intro的段落以外文本都不加粗，你就能够这样使用伪类选择器。

p:not(.intro) { font-weight: normal; }

在CSS4选择器中，能够传入一个逗号(,)分隔的列表选择器：

p:not(.intro, blockquote) { font-weight: normal; }

 

---

2.匹配任何伪类:matches

这个伪类意味着，能够将规则应用到一个组合选择器中，如：

p:matches(.alert, .error, .warn) { color: red; }

带有只要元素带<p>带有.alert、.error和.warn中任何一个类名，文本颜色都将会是red。

你能够在css4-selectors.com网站上测试你的浏览器是否支持这些CSS4选择器。这也是一个资源网站，你能够在这个站上找到将要添加的选择器。

 

---

3.关系伪类:has

这个选择器经过一个参数从一个列表选择器中匹配到相对应的元素。有一个最易说明的示例，在这个例子中任何一个包含<img>的<a>连接都会加上一个黑色的边框：

a:has( > img ) { border: 1px solid #000; }

在下面这个示例中，使用:has和:not结合在一块儿，选择不包含段落<p>的<li>元素：

li:not(:has(p)){ padding-bottom: 1em; }

 

---

4.表单限制伪类 :required：optional

匹配表单项中必选项与可选项。

input:required { color:#f30; }

 

---

5.可读可写伪类 :read-write、:read-only

大部分元素都是可读不可写的，因此都是 :read-only；像 text input 这些值能够改变的，和 HTML5 中设置了 contenteditable 的元素其自己是可改变的，这些被认为是具备写属性的，因此是 :read-write

:read-write { font-family: Georgia; }

 

---

6. :any-link

目前，咱们可使用：link和：visited代表连接的访问状态。这个更进一步，它会检查href的是否在用户的浏览历史中存在，以肯定是否一个给定的连接是否已被访问。

:link, :visited {

color: blue;

}

css4 ，能够直接这样应用，上述代码等价于：

:any-link {

color: blue;

}

 

---

7.:scoped

css4选择器，CSS被赋予一个全局范围。换句话说，若是你添加下面的CSS：

div {

color: #444;

}

全部的div将应用的 color：#444 的样式规则（这里假设没有被复写的状况下）。css4选择器 容许将样式和风格限定于一个元素标签内：

<section>

<h2>This is outside the scope.</h2>

<aside>

<style scoped>

h2 {

font-size: 2rem;

}

</style>

<h2>This is within the scope</h2>

</aside>

</section>

在这个例子中，咱们已将应用范围到限定在aside元素中。在这种标记风格将只适用于父元素下的子元素。

 

---

8.css网格布局

网格布局为咱们建立了相似于表格布局的结构，然而，咱们可使用CSS而非HTML中所描述的选择器来建立布局，经过媒体查询来重定义布局以适应不一样的上下文内容。这样咱们就能够正确区分视觉和源码的元素顺序。做为一个设计师，你能够自由地改变页面元素的位置来适应不一样断点下的布局，而没必要为你响应式设计去调整结构。与HTML中基于表格的布局不一样，网格布局容许你堆叠元素。所以，在须要的状况下，一个元素能够重叠另外一元素。

 

剧透点到为止，css4更多新特性请等待官方发布新版本。

---

更多angular1/2/四、ionic1/2/三、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。