- 作者:陈大鱼头
- github: KRISACHAN
前言
CSS 选择器是 CSS 世界中非常重要的一环。
在 CSS 2 之后,所有的 CSS 属性都是按模块去维护的。
CSS 选择器也是如此,然而如今也已经发布了第四版 —— CSS Selectors Level 4 ,这一版最早的草案发布于2011年09月29日,最后更新是2018年11月21日。
下面让我们一起来看看 Level 4 新推出的一些选择器。
正文
下面我们按照类型来划分
逻辑组合(Logical Combinations)
在这个分类下,我们有以下四个选择器:
:not()
其实 :not()
不算是新标签,不过在 Level 4 里,增加了多选的功能,代码如下:
/* 除了.left, .right, .top之外所以的div的盒子模型都会变成flex
*/
div:not(.left, .right, .top) {
display: flex;
}
/* 等价于 */
div:not(.left), div:not(.right), div:not(.top) {
display: flex;
}
兼容性如下:
额。。。还不能用
:is()
:is()
伪类将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
看个栗子:
/* 选择header, main, footer里的任意一个悬浮状态的段落(p标签) */
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
/* 等价于 */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
兼容如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F9gCwz9C-1595310466533)(https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/css/selectors-4/is()].png)
:where()
:where()
伪类接受选择器列表作为它的参数,将会选择所有能被该选择器列表中任何一条规则选中的元素。
其实就是跟 :is()
,唯一不同的就是 :where()
的优先级总是为 0 ,但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。
代码如下:
<style>
:is(section.is-styling, aside.is-styling, footer.is-styling) a {
color: red;
}
:where(section.where-styling, aside.where-styling, footer.where-styling) a {
color: orange;
}
footer a {
color: blue;
}
</style>
<article>
<h2>:is()-styled links</h2>
<section class="is-styling">
<p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
</section>
<aside class="is-styling">
<p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
</aside>
<footer class="is-styling">
<p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
</footer>
</article>
<article>
<h2>:where()-styled links</h2>
<section class="where-styling">
<p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
</section>
<aside class="where-styling">
<p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
</aside>
<footer class="where-styling">
<p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
</footer>
</article>
:is()
跟 :where()
对比效果图如下:
兼容性如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XLytuNn0-1595310466541)(https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/css/selectors-4/where()].png)
:has()
:has()
伪类代表一个元素,其给定的选择器参数(相对于该元素的 :scope)至少匹配一个元素。
:has()
接受一个选择器组作为参数。在当前规范中 :has()
并未列为实时选择器配置的一部分,意味着其不能用于样式表中。
语法如下:
// 下面的选择器只会匹配直接包含 <img> 子元素的 <a> 元素
a:has(> img)
// 下面的选择器只会匹配其后紧跟着 <p> 元素的 <h1> 元素:
h1:has(+ p)
兼容性如下:
嗯,全红。。。
语言伪类(Linguistic Pseudo-classes)
:dir()
:dir()
伪类匹配特定文字书写方向的元素。在HTML中, 文字方向由dir
属性决定。其他的文档类型可能有其他定义文字方向的方法。
:dir()
并不等于使用 [dir=…]
属性选择器。后者匹配 dir
的值且不会匹配到未定义此属性的元素,即使该元素继承了父元素的属性;类似的, [dir=rtl]
或 [dir=ltr]不会匹配到dir属性的值为auto的元素。而
:dir()
会匹配经过客户端计算后的属性, 不管是继承的dir值还是dir值为auto的。
例子如下: