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