即将推出的CSS4 Level 4 Selectors(第4级选择器)

末蓝、 2022-08-06 14:15 149阅读 0赞

注\* CSS4草案发布了。  
  
  
是时侯[学习][Link 1]一些新的CSS，不是吗？  
  
  
我们都习惯去学一个又一个的新前端框架，但是我们常常忘记了，作为我们每天使用的网络核心语言CSS本身也在不断地推出一些新功能。  
  
  
W3C编辑草案  
  
  
从1月15日的CSS Selectors Level 4 draft 草案描述了一次CSS的飞跃。  
  
  
  
  
在我们开始之前，你应该知道：本文中的CSS，很多都无法在浏览器中工作。即使是最新的浏览器。这是因为，它们还是一些草案-处于起草阶段。 level 4 selectors草案于2011年开始，第四版经过大量的讨论而最终制定。  
  
  
所以，这是什么意思？这意味着，在不久的将来，我们可能看到大部分这些功能都将实现，很多将在Chrome和Firefox浏览器的开发版本中提供。  
  
  
让我们来看看有哪些新东西！  
  
  
  
  
1. :not(.warning, .alert)  
  
  
  
  
我们在第3级选择器已经见过这个 :not 了。然而Level 4将允许与更复杂的参数匹配。  
  
  
先前，not：只能单独使用，不能被组合。例如，在Level 3([CSS3][])中，你不能这样做：

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

复制代码

它会选择所有地址中不包含somesite.com的链接。但是在新草案中，这样是允许的。  
  
  
  
  
下面是另外一个例子，选择不在col样式（Bootstrap 流式列布局样式）下的的a链接标签，和除去那些包含img图片的a标签

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

复制代码

此外，这选择器还能这样写，不选择那些后面还跟着另一个DIV的DIV。（选择同级最后一个DIV）

1.  div:not(div+div) \{     \}

复制代码

2. :has(div, p, > a)  
  
  
:has 伪元素选择器允许您选择带有指定子元素的父级元素。例如，要选择带有图像子元素为的链接，你可以使用下面的语法：

1.  a:has(img) \{\}

复制代码

然而 :has 不局限于简单的选择器。你可以与:not 和 :nth-\* 选择器相结合。  
  
  
例如，我们的选择有超过十行的表元素：

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

复制代码

:has() 和 :not() 结合使用  
  
  
选择最后一个元素不是footer的body

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

复制代码

3. :any-link  
  
  
目前，我们可以使用：link和：visited表明链接的访问状态。这个更进一步，它会检查href的是否在用户的浏览历史中存在，以确定是否一个给定的链接是否已被访问。

1.  :link, :visited \{   color: blue;\}

复制代码

建议用 level 4 选择器，可以直接这样应用，上述代码等价于：

1.  :any-link \{   color: blue;\}

复制代码

4. :scoped  
  
  
直到level 4选择器，CSS被赋予一个全局范围。换句话说，如果你添加下面的CSS：

1.  div \{   color: \#444;\}

复制代码

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

1.  <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元素中。在这种标记风格将只适用于父元素下的子元素。  
  
  
5. :matches(selector1, selector2)  
  
  
:matches 伪元素选择器可以让我们检查，一个元素所有在列表中匹配的子元素。例如，如果你想针对所有article下的，段落和H2标签和链接，你可以这样写：

1.  article :matches(h2, a, p) \{     \}

复制代码

这取代了以前更加详细的语法：

1.  article a, article h2, article p \{     \}

复制代码

6. 延伸选择器>>  
  
  
你可能熟悉的空格字符让我们应用到元素的后代上，比如一个div内的所有链接：

1.  div a \{     \}

复制代码

但是到现在为止，我们还没有看到一个明确的后代选择符。 level 4 添加了一个 >>  
  
  
但是请注意，这会导致不必要的多余的字符，它与一个空格是等价的。  
  
  
7. Table In-Column 选择器  
  
  
这是给table元素新加的一个功能，我们先来看一个基本的table表格：

1.  <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"></span>    </tr>  </tbody></table>

复制代码

给水平分组元素（即：同一行中）应用样式很简单。但给垂直的元素是整体应用样式有些麻烦。  
  
  
你为了给 personnel-info 这一列添加样式风格，可以使用Level 4的 || 选择符。在||选择符可以针对一列下的TD元素应用样式，如：

1.  .personnel-info || td \{  
    
2.  \}

复制代码

结论  
  
  
Level 4封装的选择器功能非常强大。但是这些草稿还没有完全定稿，还有变化的可能，当然，他们正式发布的时侯，我们将再次介绍！  
  
  
  
  
原文地址： [webdesign.tutsplus.com][]

[Link 1]: http://www.html5cn.org/portal.php?mod=list&catid=13
[CSS3]: http://www.html5cn.org/portal.php?mod=list&catid=16
[webdesign.tutsplus.com]: http://webdesign.tutsplus.com/articles/css-level-4-selectors-to-watch-out-for--cms-23117?utm_source=ourjs.com