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; }
带有只要元素带
带有.alert、.error和.warn中任何一个类名，文本颜色都将会是red。
你可以在http://css4-selectors.com网站上测试你的浏览器是否支持这些CSS4选择器。这也是一个资源网站，你可以在这个站上找到将要添加的选择器。
3.关系伪类:has
这个选择器通过一个参数从一个列表选择器中匹配到相对应的元素。有一个最易说明的示例，在这个例子中任何一个包含的链接都会加上一个黑色的边框：
a:has( > img ) { border: 1px solid #000; }
在下面这个示例中，使用:has和:not结合在一起，选择不包含段落
的元素：
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选择器 允许将样式和风格限定于一个元素标签内。
在这个例子中，我们已将应用范围到限定在aside元素中。在这种标记风格将只适用于父元素下的子元素。
8.css网格布局
网格布局为我们创建了类似于表格布局的结构，然而，我们可以使用CSS而非HTML中所描述的选择器来创建布局，通过媒体查询来重定义布局以适应不同的上下文内容。这样我们就可以正确区分视觉和源码的元素顺序。作为一个设计师，你可以自由地改变页面元素的位置来适应不同断点下的布局，而不必为你响应式设计去调整结构。与HTML中基于表格的布局不同，网格布局允许你堆叠元素。因此，在需要的情况下，一个元素可以重叠另一元素。
剧透点到为止，css4更多新特性请等待官方发布新版本。
更多angular1/2/4、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。
网友评论