css选择器选择3和4_注意CSS Level 4选择器

css选择器选择3和4

我们该开始学习一些新CSS了，不是吗？

我们都习惯于向左右框架引入新功能，但是我们常常忘记，每天使用的核心Web语言不断开发新功能。

W3C编辑草稿

从1月15日开始的CSS选择器第4级草案概述了CSS功能的重大飞跃。

在开始之前，您应该知道：今天在本文中找到CSS在很大程度上将无法在任何浏览器中运行。 即使是最新的。 原因是草稿正好是草稿。 这是4级选择器草案的第四版，该版本于2011年开始。草案中建议的选择器是针对新选择器的规范，文档本身的编辑人员通过大量的讨论和协作提出了建议。社区中参加W3C邮件列表的人员。

那么这是什么意思？ 这意味着在相对不久的将来，我们可能会看到实现了许多这些功能 ，并且许多功能将在Chrome和Firefox等浏览器的开发版本中提供。

让我们看一些新的选择器！

1.：否（。警告，.alert）

我们已经在3级选择器中看到过:not选择器。 但是，当前4级:not选择器的草案允许具有更复杂匹配的多个参数。

以前， :not只能与单个选择器一起使用，不能组合使用。 例如，级别3 :not可能看起来像这样：

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

这将选择所有没有href锚标记，包括字符串"somesite.com" 。 但是有了新草案，我们可以做更多有趣的事情。

我们将简短介绍:has ，但是现在，这里是一个选择器，用于选择不是col类或以col 开头的类的元素的直接后代的所有链接（例如Bootstrap的网格类col-md-4 ）。 。 它还将忽略以img元素作为后代的锚。

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

}

该选择器还允许我们执行以下操作：

div:not(div+div) {
    
}

这将选择不是其他div的下一个同级兄弟的所有div。

更进一步

通过添加:nth-last-child伪类，我们还可以执行以下操作：

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

这将选择所有div，但不包括.container元素的直接后代并且是最后两个同级的div。

如您所见，这些规则会变得非常强大和复杂。 但是让我们通过引入:has伪选择器为混合添加更多的灵活性。

2 .：具有（div，p，> a）

:has伪选择器允许您选择将传入参数作为子元素的元素。 例如，要选择所有具有图像元素作为子元素的锚链接，请使用以下语法：

a:has(img) {
    
}

但是， :has不限于简单的选择器。 您可以将:has与:not和:nth-*选择器结合使用，以创建非常复杂的关系选择器。

例如，让我们选择具有十行以上的table元素：

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

：has（）和：not（）的组合

如何选择最后一个子元素不是页脚的body元素？

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

3：任何链接

当前，我们可以使用:link和:visited定位超:link 。 这不仅是简单地使用a选择器，还因为它检查href的存在并检查用户的浏览历史记录以确定是否已访问给定链接。

:link, :visited {
   color: blue;
}

使用建议的4级选择器，我们可以使用:any-link所有链接（无论是否访问）设置样式。 上面的样式相对等同于：

:any-link {
   color: blue;
}

4 . ：范围

在第4级选择器之前，CSS被赋予了全局范围。 换句话说，如果添加以下CSS：

div {
   color: #444;
}

所有div都会收到color: #444样式规则。 （这假定不应用其他任何竞争样式。）级别4选择器允许将样式表和样式标签的范围限定为一个元素：

<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的父元素的后代。

5.：匹配（selector1，选择器2）

:matches伪选择器允许我们检查一个元素是否与元素列表匹配。 例如，如果要定位文章中的所有锚，段落和h2标签，则可以使用以下方法实现此目的：

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

这将替换以前更加冗长的语法：

article a, article h2, article p {
    
}

注意 ：从该版本的草稿开始， :matches()不得与:not ， :has或其他嵌套的:matches 。

6.显式降序选择器>>

您可能熟悉空格字符，使我们能够编写后代规则，例如div中的所有锚点：

div a {
    
}

但是直到现在我们还没有看到显式的后代选择器。 对于4级选择器，我们有一个： >> 。

但是，请注意，这会导致CSS中不必要的多余字符，因为您可以使用单个字符空间来实现相同的效果，因此请小心使用它。 大概它充当直接子选择器>和shadow-dom访问选择器>>>之间的桥梁。

7.表列选择器||

该选择器是表样式的一个受欢迎的附加功能。 让我们看一下基本表的一些标记：

<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><!-- etc -->
    </tr>
  </tbody>
</table>

从历史上讲，对水平分组的元素（即在同一行内）进行样式设置相对来说比较简单。 垂直分组的样式元素是整个其他球类游戏。

为了使用personnel-info类对属于列的所有元素进行样式设置，我们可以向标记中添加更多类并直接对其进行样式设置，或者使用4级选择器，可以使用|| 选择器。 || 选择器使您可以明确地将td元素作为目标，如下所示：

.personnel-info || td {
    
}

结论

总结了我们对第4级选择器中的一些新功能的概述！ 这些功能强大，节省字节的新工具集并未完全锁定到位，但是浏览器开始以其早期的实验形式实现它们，因此请注意规范的更新。 当然，当它们正式化后，我们将在Tuts +上介绍它们！

查阅我们关于“将来CSS”的课程，其中Craig Campbell涵盖了其中：

翻译自: https://webdesign.tutsplus.com/articles/css-level-4-selectors-to-watch-out-for--cms-23117

css选择器选择3和4