最新CSS4选择器前瞻

05-04 次

标签 css选择器 css4

2015年4月30日，W3C发布了最新的CSS选择器4级草案。

在我们开始介绍这些新的CSS选择器之前，你必须要了解，这些选择器目前在绝大部分的浏览器中都是不可用的。因为这只是一份草案。这是4级CSS选择器的第四份草案，第一份草案是2011年开始起草的。草案中的新CSS选择器只是一种有W3C社区的开发人员提出的一些规范。

也许在不久的将来，这些新的CSS4选择器会被实现，在Chrome或Firefox浏览器中提供一些测试版本。

下面我们来一起看一下有哪些新的CSS4选择器。

:not(.warning, .alert)

在CSS3选择器中，我们曾经见过:not选择器。在CSS4选择器草案中，:not选择器可以带有多个参数，用于更复杂的匹配。

以前，:not只可以在一个选择器上使用，它不能组合使用。例如，CSS3的:not选择器类似下面的样子：

a:not([href*="somesite.com"]) {  }

上面的选择器会选择href属性中不带somesite.com的所有超链接元素。在CSS4选择器草案中，我们可以都一些更有趣的事情。

下面的例子中，会选择所有不是直接子元素，带有class为col或一col开头（类似Bootstrup中的col-md-4 class）的超链接元素，并且会忽略子元素为图片元素的超链接。

a:not([class|="col"]>a, :has(img)) { }

通过和:nth-last-child伪元素选择器结合，我们可以像下面这样写代码：

div:not(.container>div:nth-last-child(-n+2)) {
     
}

这将选择所有不是.container元素的直接子元素和最后两个兄弟元素的div元素。

你可以看到，这些CSS规则比以前版本的CSS选择器更加强大和复杂。

:has(div, p, > a)

这个:has选择器允许你选择带有参数中指定的子元素的元素。例如，选择带有img子元素的超链接元素，你可以使用下面的语法：

a:has(img) {  }

然而，:has选择器并不局限于单个选择器。你可以将:has选择器和:not和:nth-*选择器结合来更复杂的关系选择器。

例如选择一个行数大于10行的表格元素。

table:has(tr:nth-of-type(11)) {
     
}

再如选择最后一个子元素是footer的body元素。

body:not(:has(footer:last-child)) {
     
}

:any-link

当前，我们可以在超链接元素上使用:link和:visited。这种写法比简单的使用a选择器更好，它会检查href属性，并检查用户浏览器的历史来决定该超链接是否被访问过。

:link, :visited {
   color: blue;
}

在CSS4选择器中，我们可以使用:any-link为所有的超链接（访问和为访问过的）提供样式，上面的代码可以写为：

:any-link {
   color: blue;
}

:scoped

在CSS选择器中有全局范围（global scope）的概念。换句话说，你添加了下面的代码：

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元素中使用style标签来提供一个局部的样式。这个样式只会对style元素的父元素的后代子元素产生作用。

:matches(selector1, selector2)

:matches伪元素选择器允许我们检查一个元素是否和参数列表中的元素相匹配。例如，如果你需要找出一个article元素中的所有a、h2和p元素，可以像下面这样写规则：

article :matches(h2, a, p) {
     
}

在以前我们需要像下面这样来写规则：

article a, article h2, article p {
     
}

注意：在这份草案中，:matches选择器不能和:not或:has选择器一起使用，也不能嵌套:matches。

派生选择器`>>`

你可能经常使用一个空格符来书写后代选择器，例如所有在div元素中的a元素：

div a {
     
}

到目前为止，还没有一个明确的后代选择器。在CSS4中，规定了一个明确的后代选择器：>>。

但是，这显然有一点多余，你可以使用一个空格符来完成同样的事情。W3C草案这样设定的原因可能是由于直接后代元素选择器使用>，而shadow-dom access选择器使用>>>的原因吧。

表格In-Column选择器 `||`

这个选择器是为表格定制的选择器。来看一下一个表格的基本HTML代码：

<table>
  <colgroup>
    <col class="id">
    <col class="personnel-info" colspan="2">
  </colgroup>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <span class="c"><!-- etc --></span>
    </tr>
  </tbody>
</table>

要给一个表格行添加样式是非常简单的事情。但是如果要为一个表格列添加样式就不简单了。

要为表格中同一列的带有personnel-info class的单元格添加样式，在CSS4中，我们可以使用||选择器。||选择器允许你选择所有带personnel-info的td元素。