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、微信小程序等技术文章，请关注微信公众号——ionic实战。