CSS Selector
约 2 分钟阅读
Pseudo
- 用户操作 - , , , ,
- 位置 - , , , , , ,
- 语言 - ,
- 时间维度 - , ,
- 用于 WebVTT - 字幕
- 资源状态 - ,
- 用于媒体资源
- 输入组件 - , , , , , , , ,
- 树结构 - , ,
:nth[-last]-child,:(first|last|only)-child,:nth[-last]-of-type,:(first|last|only)-of-type - 选择 - , , ,
- ShadowDOM - ,
- 内容 - ,
| defined | pseudo | desc |
|---|---|---|
| CSS 1 | ||
| 未访问链接 | ||
| 已访问链接 | ||
| CSS 2 | ||
| Selectors 3 | ||
当前 url 匹配目标 #ele-id | ||
| 一般指 html, 自定义元素时指当前元素 | ||
| () | ||
| () | ||
| () | ||
| () | ||
| 选择空白节点 | ||
| () | ||
| CSS 3 UI | ||
| Selectors 4 | ||
| or ,有 href 元素 | ||
| 如果链接匹配当前页面 | ||
| 目前无法定义 scope, 等同 ; DOM 有 scope | ||
| () | ||
| () | ||
| () | 使用最高优先级 | |
| () | 与 :is 相同，但无优先级，适用于写样式库 | |
| 浏览器根据操作方式决定是否显示 focus | ||
| 增强 () | 参数与 相同 | |
| 暂未实现 - 类似 parent 选择 | ||
| 不支持 | ||
| Fullscreen API | 全屏时 | |
| CSS 4 UI | ||
/* 不在 nav 下的 a */
a:not(nav *) {
}- - 使用 id 或 name 属性
https://wener.me#reference
- - 早期叫
- 类似于缩写展开
:is(h1,h2) p->h1 p, h2 p - 不能选择伪元素
- 类似于缩写展开
- = - 但不增加选择符权重
- - Chrome 105
- =
- 限定选择范围 -
querySelector(),querySelectorAll(),matches(),Element.closest() - 目前还无法创建 scope
- 限定选择范围 -
- container query
<!-- 插入一个专门用于定位的 anchor -->
<!-- 目前 name 属性已废弃 -->
<a name="my-anchor"></a>
<a id="my-anchor"></a>FAQ
选择多个子元素
/* 更现代的做法 */
.article :is(h1, h2, h3) {
}
/* 以前的做法 */
.article h1,
.article h2,
.article h3 {
}选择内容匹配
// jQuery
$('td:contains("Yes")')
// js console
$x("//td[text()='Yes']")
// js
document.evaluate("//td[text()='Yes']",document).iterateNext()