Skip to content

CSS 选择器 详解

所有常用的 CSS 选择器,按家族分组:基础、组合器、伪类、伪元素和属性选择器。每行将选择器与一行示例配对。

选择器决定规则应用到哪些元素。多个规则同时匹配时,优先级决定谁胜出:内联胜 id,id 胜类,类胜类型。从右往左读选择器:浏览器先匹配最右边的部分,再沿组合器向上回溯。下面的家族几乎涵盖你会写到的所有内容。

参考表格 · 53 条目
53 of 53 rows
基础
该标签的每个元素。button { }
带有该类的元素。.active { }
带有该 id 的唯一元素。#header { }
所有元素。* { box-sizing: border-box; }
文档根元素;放置全局自定义属性的惯用位置。:root { --gap: 1rem; }
匹配 A 或 B 的元素(分组)。h1, h2, h3 { }
组合器
任何作为 A 后代的 B。nav a { }
作为 A 直接子元素的 B。ul > li { }
紧跟在 A 之后的 B,同一父元素。h1 + p { }
同一父元素中位于 A 之后的每个 B。h1 ~ p { }
伪类(状态)
指针悬停其上时的元素。a:hover { }
持有键盘焦点的元素。input:focus { }
作为父元素第一个子元素的元素。li:first-child { }
第 n 个子元素;接受 2n 这样的公式。tr:nth-child(2n) { }
不匹配任何内部选择器的元素;自 Selectors 4 起接受列表。li:not(:first-child, .skip) { }
被选中的复选框、单选框或选项。input:checked { }
被禁用的输入框或按钮。button:disabled { }
包含与内部选择器匹配元素的父元素。li:has(ul) { }
列表中的任意选择器;优先级取列表中最高的。:is(ol, ul) li { }
与 :is() 相同,但优先级为零。:where(ol, ul) li { }
应显示焦点环的焦点,通常来自键盘。a:focus-visible { }
自身或后代持有焦点的元素。form:focus-within { }
作为父元素最后一个子元素的元素。li:last-child { }
没有兄弟元素的元素。p:only-child { }
同标签的第 n 个兄弟元素;接受 2n 这样的公式。p:nth-of-type(2n) { }
同标签的第一个或最后一个兄弟元素。p:first-of-type { }
没有子元素也没有文本的元素。td:empty { }
未访问的链接和已访问的链接。a:visited { }
标记为必填的输入和留作可选的输入。input:required { }
值通过或未通过其校验规则的输入。input:invalid { }
用户无法编辑的输入。input:read-only { }
id 与 URL 片段匹配的元素。#note:target { }
预选的选项或一组的默认按钮。input:default { }
被脚本设为不确定状态的复选框。input:indeterminate { }
任何内置元素,或注册之后的自定义元素。my-widget:defined { }
使用指定语言的元素。p:lang(fr) { }
伪元素
元素之前生成的内容节点。label::before { content: ""; }
元素之后生成的内容节点。code::after { content: ";"; }
文本块的第一个字母。p::first-letter { }
输入框的占位文本。input::placeholder { }
文本块的第一行。p::first-line { }
用户选中的文本。::selection { }
列表项的项目符号或编号。li::marker { }
全屏元素或对话框后面的区域。dialog::backdrop { }
文件输入内部的浏览按钮。input::file-selector-button { }
宿主已暴露的 shadow-DOM 部分。my-widget::part(header) { }
属性选择器
拥有该属性的元素,值不限。[required] { }
属性恰好等于 val。[type="submit"] { }
属性以 val 开头。a[href^="https"] { }
属性以 val 结尾。a[href$=".pdf"] { }
属性包含 val。a[href*="login"] { }
包含 val 的空格分隔列表。[class~="badge"] { }
值等于 val,或以 val 加连字符开头。[lang|="en"] { }