盘点 CSS Selectors Level 4 中新增的选择器

CSS 选择器在实践中是非常常用的,无论是在写样式上或是在 JS 中选择 DOM 元素都需要用到。在 CSS Selectors Level 4 中,工作组继续为选择器标准添加了更丰富的选择器。下面我们来了解一下。

:is()

:is 是一个用于匹配任意元素的伪类,使用方法很简单,只需要将选择器列表传入即可,也就是说,:is()的结果也就是传入的选择器列表中选中的元素。

那么这个选择器有什么用呢?举个例子:我需要对不同层级下的h1标签设置不同的字体大小:


/* Level 0 */

h1 {

 font-size: 30px;

}

/* Level 1 */

section h1,

article h1,

aside h1,

nav h1 {

 font-size: 25px;

}

/* Level 2 */

section section h1,

section article h1,

section aside h1,

section nav h1 {

 font-size: 20px;

}

会发现我们需要写很长的列表才能区分覆盖到不同层级中的 h1 标签,那么此时 :is 就派上了用场,前面说到,:is即代表着参数里面的选择选择器列表选择的元素,那么我们可以把上面的代码进行简化:


/* Level 0 */

h1 {

 font-size: 30px;

}

/* Level 1 */

:is(section, article, aside, nav) h1 {

 font-size: 25px;

}

/* Level 2 */

section :is(section, article, aside, nav) h1 {

 font-size: 20px;

}

是不是一下子简洁了很多?是。

:is也可以直接看做是类似选择列表的语法糖,简化编写步骤,浏览器会自动将:is展开到简化之前的形式进行解析。

使用:is时需要注意的

  1. 遇到不支持的选择器

通常,在遇到不支持的选择器时,浏览器会直接将整条规则丢弃。例如,当浏览器不支持:unsupported时,:supported 是不会生效的。


:supported, :unsupported {

 font-size: 12px;

 }

而在:is中出现不支持的选择器,则是相反的行为,:supported 仍然会被正确生效。


:is(:supported, :unsupported) {

 font-size: 12px;

 }

2. 选择器的权重

整个:is选择器的权重由传入的选择器列表中的权重最高的选择器决定


:is(span, #id) {

 font-size: 12px;

 }

#id选择器拥有 (1, 0 ,0) 的权重,而span 只有 (0, 0, 1),所以最终去匹配<span></span><div id="id"></p ><span id="id"></span> 都是使用 (1, 0, 0) 的权重值。

  1. 伪元素不能在:is中使用

浏览器支持情况

这里查的数据是 :matches,:matches 即为 :is 的前身,在 CSS Selector Level 4 中,我们所熟知的:not 也支持选择器列表作为参数使用了,而功能上:matches则与:not是相对的,所以为了成对,:matches改名为:is

:where()

:where 选择器是 :is 选择器的无权重版本。前面提到,:is 的权重是由里边的选择器列表的最高权重决定的,:where 则不关心里边的权重,它的权重直接为0。


.class:where(#id) {

 font-size: 12px;

}

如上面的例子,整个样式规则权重为 (0, 1, 0),只有 .class 贡献了权重值。

在未来,:where 选择器可能会支持指定权重值的选项

:scope
:scope选择器为它后面的选择器提供了参考点,在 CSS 中,默认 :scope 代表的即为 :root。而在使用 JavaScript 进行选择元素时,例如 querySelector 调用,可以用来限定选择器的选择范围。


<div class="outer">

 <div class="select">

 <div class="inner">

 </div>

 </div>

</div>

var select = document.querySelector(‘.select‘);

var inner = select.querySelectorAll(‘.outer .inner‘);

inner.length; // 1, 不是 0

你会发现,我本来只想查 .select 里面的 .outer .inner,这明显不符合预期,那么使用 :scope 可以解决此问题。


var select = document.querySelector(‘.select‘);

var inner = select.querySelectorAll(‘:scope .outer .inner‘);

inner.length; // 0

:any-link

该选择器用于选择所有包含href属性的链接,在 HTML5 中,这些链接包含 a、area 以及 link 标签。

:local-link

:local-link 和 :any-link 的作用是相同的,但 :local-link 附加了一个限制,它只能选择到链接的绝对地址是和当前页面的域名相匹配的,也就是说,如果一个链接的href是站外链接,将不会被:local-link选择到。

:target-within

我们都知道,在 URL 中可以用过 #anchor 的形式,让浏览器定位到id为#anchor或者name为anchor的锚点上, 当命中一个锚点时,我们可以使用:target选择到当前命中的那个元素。

现在有一个场景,我的某个section容器的边框需要在其里边的某个锚点命中时改变边框颜色,此时我们可以对这个容器使用:target-within选择到这个section,也就是说,这个section内部的某个元素必须能被:target选中。

:focus-within

:focus-within 与 :target-within 的效果是相同的,但它仅在该容器元素内有元素被聚焦时能被选中,也就是说,这个容器内部的某个元素必须能被 :focus 选中。

:focus-visible

当一个元素被聚焦,能被 :focus 选中并且浏览器需要在该元素上显示聚焦效果时(例如浏览器中输入框聚焦时默认显示的外框),该元素才能被这个选择器选中。

有了这个选择器,就能用于自定义聚焦样式。

:dir()

该选择器用于根据语言的书写方向进行选择,例如常见的左到右书写形式(left-to-right)则可以使用 :dir(ltr) 进行选择;右到左的书写形式则可以使用 :dir(rtl) 进行选择。如果给定的值是 auto,那么会选中符合 ltr 或 rlt 顺序的元素。

:blank

该选择器用于选择输入框值为空的元素。

:user-invalid

该选择器用于选择未通过验证的输入框,例如在 max 和 min 范围之外的输入框,标明了required 但值为空的输入框。

:indeterminate

该选择器用于选择状态未确定的元素,例如在 radio 和 checkbox 元素中,它们的值可以是是 checked 或者 unchecked,如果没有显式地设定,它们的状态都是未确定的。

时间线相关选择器

时间线相关的选择器用于在某些与时间进度相关的功能上使用,例如文字阅读器阅读的时间轴,或是在视频回放中用视频时间显示 WebVTT 字幕等。

:current()

当前正在被阅读器阅读的元素或正在被显示的字幕。


article:current(p) {

 background: yellow;

}

:past()

已经被阅读过或显示过的元素。

:future()

将要被阅读或显示的元素。

原文地址:https://blog.51cto.com/14284898/2380396

时间: 2024-10-10 06:54:06

盘点 CSS Selectors Level 4 中新增的选择器的相关文章

[Selenium] 在Chrome的开发者工具中验证检查XPath/CSS selectors

Evaluate and validate XPath/CSS selectors in Chrome Developer Tools Method 1 : From Elements panel Use the search function inside Elements panel to evaluate XPath/CSS selectors and highlight matching nodes in the DOM. 1.Press F12 to open up Chrome De

CSS Selectors

Table of Contents Universal Selector Element Selector Class Selector ID Selector Attribute Selector Attribute Equals Attribute Begins With Attribute Begins With Language Code Attribute Ends With Attribute Contains Attribute Contains Word Group Select

转:浅谈CSS在前端优化中一些值得注意的关键点

前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加载时间,但其实性能不仅仅是指加载时间,还包括浏览器性能.网络性能.开发效率.在Web前端开发中,性能是一个非常重要的需要考虑的点.本文将介绍一些开发原则和性能准则,这些都是提高Web前端性能的基础. 1. 开发原则 1.1 编写符合当代浏览器性能的代码如果想提高前端性能,就必须理解浏览器的工作原理,

BeautifulSoup高级应用 之 CSS selectors /CSS 选择器

BeautifulSoup支持最常用的CSS selectors,这是将字符串转化为Tag对象或者BeautifulSoup自身的.select()方法. 本篇所使用的html为: html_doc = """<html><head><title>The Dormouse's story</title></head><body><p class="title"><b&

使用HTML5中新增结构元素来构建网页

HTML5中新增了几个结构元素(section元素.article元素.nav元素.aside元素.header元素和footer元素),通过运用这些结构元素,可以让网页的整体结构更加直观和明确.更加具有语义化和更具有现代风格. 1.组织网页结构 在一个用HTML5实现的网页中,每一个网页都将由一些主体结构元素构成. 在大型的网站中,一个网页通常有以下几个结构元素组成: header结构元素:通常用来展示网站的标题.企业或公司的Logo图片.广告(Flash等格式).网站导航条等. aside结

HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理。

一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.time.mark.section.header.footer.hgroup.progress.figure.figcaption.nav.meter.output.details.summary.ruby和main   三.让IE5.5~9支持HTML5新标签 1. IE5.5~8下对于不支持的标签

css如何设置字符串中第一个字符的样式

css如何设置字符串中第一个字符的样式:本章节介绍一下如何使用css设置字符串中第一个字符的样式.以前我们实现此效果的方式,可能会在第一个字符上嵌套上一个span标签.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

Bash 4.4 中新增的 ${[email&#160;protected]} 语法

Bash 4.4 中新增了一种 ${...} 语法,长这样:${[email protected]}.根据不同的 operator,它展开后的值可能是 parameter 这个参数的值经过某种转换后的值,又可能是关于 parameter 参数自身的某种信息.这句话太抽象了,还是看下面的详细解释吧. operator 一共有 5 种值,分别是 Q.E.P.A.a,都是单个的字母. Q quote 的缩写,这个 operator 的功能是把 parameter 的值加上合适的引号,从而转换成在脚本中

CSS中的id选择器和class选择器简单介绍

<!-- CSS中选择器 CSS有两种选择器id和class,总之如果说你想在HTML元素中设置CSS属性, 你要在元素中设置id和class选择器.那么我们现在来一个一个的介绍这两中选择器 id选择器: HTML中的元素属性用id来设置id选择器,CSS中的id选择器是用"#"来定义的 比如: #para1 { text-align:center; color:red; } 这样就定义了一个选择器,什么是选择器,在网上查的是说需要改变的HTML元素,很正确,在一开始我们的内部样