CSS 史上最全面的选择器大全以及兼容性整理（共计 118 个） CSS 选择器是 CSS 的核心工具，用于选择 HTML 元素并应用样式。它们就像网页中的“精准定位器”，可以根据元素的类型、属性、状态或位置进行选择。随着 web 技术的发展，CSS 选择器不断扩展，提供了更强大的功能。本文档整理了截至 2025 年的所有 CSS 选择器，共计118个，旨在为初学者和资深开发者提供全面、易懂的指南。
本文包含：
基本选择器：6 个组合器：6 个嵌套选择器：1 个属性选择器：9 个伪类选择器：71 个伪元素选择器：25 个使用 Can I Use 验证浏览器支持，尝试组合选择器实现复杂样式。==1. 基本选择器== 类型选择器 (Type Selector) 描述: 选择特定类型的 HTML 元素（如
、
color: red;
}123html
这是一个段落。
1效果: 所有元素的文本颜色变为红色。兼容性: 所有现代浏览器（如 Chrome、Firefox、Safari、Edge）支持。类型选择器通用选择器 (Universal Selector) 描述: 使用 * 选择页面中的所有元素，常用于全局样式重置。示例:css* {
margin: 0;
padding: 0;
}1234html
段落
12效果: 所有元素的外边距和内边距重置为 0。兼容性: 所有现代浏览器支持，但需谨慎使用以避免性能问题。通用选择器类选择器 (Class Selector) 描述: 使用 . 前缀选择具有特定 class 属性的元素。示例:css.highlight {background-color: yellow;
}123html
高亮文本
1效果: 具有 class="highlight" 的元素背景色变为黄色。兼容性: 所有现代浏览器支持。类选择器ID 选择器 (ID Selector) 描述: 使用 # 前缀选择具有特定 id 属性的唯一元素。示例:css#main {width: 100%;
}123html
border: 2px solid gold;
}123html
高亮段落
标签且具有 highlight 类的元素添加金色边框。兼容性: CSS 的基础功能，所有浏览器均支持。兼容性取决于交集中使用的最新选择器或伪类。并集选择器 (Multiple Selector) 描述: 使用逗号分隔多个选择器，选择满足任一条件的元素。示例:cssh1, h2, .title {
font-weight: bold;
}123html
标题1
标题2
标题段落
123效果: 所有、 和具有 title 类的元素字体加粗。兼容性: 所有浏览器均支持。==2. 组合器 (Combinators)== 后代选择器 (Descendant Combinator) 描述: 使用空格选择某个元素内的所有后代元素。
示例:
cssdiv p {
color: blue;
}123html
这是一个段落。
嵌套段落
元素文本颜色变为蓝色。
兼容性: 所有现代浏览器支持。
CSS 2.1
子选择器 (Child Combinator) 描述: 使用 > 选择某个元素的直接子元素。示例:cssdiv > p {
color: green;
}123html
直接子段落
非直接子段落
元素文本颜色变为绿色。兼容性: 所有现代浏览器支持。子选择器相邻同胞选择器 (Adjacent Sibling Combinator) 描述: 使用 + 选择紧跟在某个元素后的同胞元素。示例:cssh1 + p {
font-size: 18px;
}123html
标题
紧邻段落
非紧邻段落
123效果: 紧跟后的第一个
字体大小为 18px。兼容性: 所有现代浏览器支持。相邻同胞选择器一般同胞选择器 (General Sibling Combinator) 描述: 使用 ~ 选择某个元素之后的所有同胞元素。示例:cssh1 ~ p {
margin-left: 20px;
}123html
标题
段落1
段落2
123效果:后的所有
元素左边距为 20px。兼容性: 所有现代浏览器支持。一般同胞选择器列组合器 (Column Combinator) 描述: 使用 || 选择表格中同一列的元素。
示例:
csscol || td {
border: 1px solid black;
}123html
| 单元格 |
兼容性: 这是一项实验性技术 #selectordef-column，大部分浏览器不支持。
在这里插入图片描述
命名空间分隔符 (Namespace Separator) 描述: 使用 | 选择特定命名空间的元素（如 SVG）。示例:cssSVG|a {
fill: red;
}123html1效果: SVG 命名空间中的 元素填充颜色为红色。兼容性: 所有现代浏览器支持。命名空间分隔符
==3. 嵌套选择器 (Nesting Selector)== & 描述: 用于 CSS 原生嵌套语法，表示当前选择器的父选择器，可简化选择器层级。（类似Sass以及Less的嵌套语法）
示例:
css.parent {
color: black;
& .child {
color: blue;
}
}123456html
兼容性: 支持有限，大部分浏览器仅在2023年后的版本支持
嵌套选择器
==4. 属性选择器 (Attribute Selectors)== [attr] 描述: 选择具有特定属性的元素。
示例:
cssa[href] {
color: blue;
}123html链接1效果: 具有 href 属性的 元素颜色为蓝色。
兼容性: CSS 2.1选择器，所有现代浏览器支持。
属性选择器
[attr=value] 描述: 选择属性值等于特定值的元素。示例:cssinput[type="text"] {
background: yellow;
}123html1效果: 类型为 text 的 背景色为黄色。兼容性: CSS 2.1选择器，所有现代浏览器支持。属性选择器[attr~=value] 描述: 选择属性值包含特定单词的元素（空格分隔）。示例:cssp[title~="flower"] {
font-style: italic;
}123html
文本
1效果: title 属性包含单词 flower 的元素为斜体。兼容性: CSS 2.1选择器，所有现代浏览器支持。CSS 2.1
[attr|=value] 描述: 选择属性值为特定值或以特定值开头的元素（用于语言子码）。示例:css[lang|="en"] {
color: green;
}123html
文本
1效果: lang 属性以 en 开头的元素颜色为绿色。兼容性: CSS 2.1选择器，所有现代浏览器支持。CSS 2.1[attr^=value] 描述: 选择属性值以特定值开头的元素。示例:cssa[href^="https"] {color: purple;
}123html链接1效果: href 属性以 https 开头的 元素颜色为紫色。兼容性: CSS 3选择器，所有现代浏览器支持。CSS 3[attr$=value] 描述: 选择属性值以特定值结尾的元素。示例:cssa[href$=".pdf"] {
background: yellow;
}123html文档1效果: href 属性以 .pdf 结尾的 元素背景色为黄色。兼容性: CSS 3选择器，所有现代浏览器支持。CSS 3[attr*=value] 描述: 选择属性值包含特定值的元素。示例:cssa[href*="example"] {
text-decoration: underline;
}123html链接1效果: href 属性包含 example 的 元素添加下划线。兼容性: CSS 3选择器，所有现代浏览器支持。CSS 3[attr=value i] 描述: 选择属性值等于特定值（忽略大小写）的元素。示例:cssa[href="https://example.com" i] {
color: green;
}123html链接1效果: href 属性忽略大小写匹配 https://example.com 的 元素颜色为绿色。兼容性: 除了IE浏览器，其他所有现代浏览器支持。attr=value i[attr=value s] 描述: 选择属性值严格等于特定值的元素（区分大小写）。示例:cssa[href="https://example.com" s] {
color: red;
}123html链接1效果: href 属性严格匹配 https://example.com 的 元素颜色为红色。兼容性: 仅火狐浏览器支持。attr=value s==5. 伪类选择器 (Pseudo-classes)== 伪类选择器用于选择元素的特定状态或位置，按功能分组如下：
==交互伪类== :hover 描述: 鼠标悬停在元素上时。示例:cssa:hover {
color: red;
}123html链接1效果: 鼠标悬停时链接颜色变为红色。兼容性: 所有现代浏览器支持。hover:active 描述: 元素被激活（如点击）时。
示例:
cssbutton:active {
background: darkblue;
}123html1效果: 点击按钮时背景色变为深蓝色。
兼容性: 所有现代浏览器支持。
active
:focus 描述: 元素获得焦点时。
示例:
cssinput:focus {
outline: none;
}123html1效果: 输入框获得焦点时移除默认轮廓。
兼容性: 所有现代浏览器支持。
focus
:focus-within 描述: 元素或其后代获得焦点时。
示例:
cssform:focus-within {
border: 2px solid blue;
}123html
1效果: 表单或其输入框获得焦点时，边框变为蓝色。兼容性: 除了IE浏览器，大多数现代浏览器支持。
focus-within
:focus-visible 描述: 元素通过键盘导航获得焦点时。
示例:
cssa:focus-visible {
outline: 2px solid red;
}123html链接1效果: 通过键盘导航获得焦点时显示红色轮廓。
兼容性: 除了IE浏览器，大多数现代浏览器支持。
focus-visible
:link 描述: 未访问的链接。示例:cssa:link {
color: blue;
}123html链接1效果: 未访问链接颜色为蓝色。兼容性: 所有现代浏览器支持。在这里插入图片描述
:visited 描述: 已访问的链接。
示例:
cssa:visited {
color: purple;
}123html链接1效果: 已访问链接颜色为紫色。
兼容性: 所有现代浏览器支持，样式受隐私限制。
visited
:any-link 描述: 未访问或已访问的链接。
示例:
cssa:any-link {
text-decoration: underline;
}123html链接1效果: 所有链接添加下划线。
兼容性: 除了IE浏览器，大多数现代浏览器支持。
any-link
==结构伪类== :first-child 描述: 父元素的第一个子元素。
示例:
cssp:first-child {
margin-top: 0;
}123html
第一个
第二个
上边距为 0。
兼容性: 所有现代浏览器支持。
first-child
:last-child 描述: 父元素的最后一个子元素。
示例:
cssp:last-child {
margin-bottom: 0;
}123html
第一个
最后一个
下边距为 0。
兼容性: 所有现代浏览器支持。
last-child
:nth-child(n) 描述: 父元素的第 n 个子元素。
示例:
cssli:nth-child(2) {
color: red;
}123html
- 1
- 2
兼容性: 所有现代浏览器支持。
nth-child
:nth-last-child(n) 描述: 从末尾计数的第 n 个子元素。
示例:
cssli:nth-last-child(2) {
color: red;
}123html
- 1
- 2
- 3
兼容性: 所有现代浏览器支持。
nth-last-child
:first-of-type 描述: 父元素的第一个同类型子元素。
示例:
cssp:first-of-type {
font-weight: bold;
}123html
第一个
字重加粗。
兼容性: 所有现代浏览器支持。
first-of-type
:last-of-type 描述: 父元素的最后一个同类型子元素。
示例:
cssp:last-of-type {
text-decoration: underline;
}123html
第一个
最后一个
添加下划线。
兼容性: 所有现代浏览器支持。
last-of-type
:nth-of-type(n) 描述: 父元素的第 n 个同类型子元素。示例:cssp:nth-of-type(2) {
color: green;
}123html
1
23
颜色变为绿色。兼容性: 所有现代浏览器支持。nth-of-type:nth-last-of-type(n) 描述: 从末尾计数的第 n 个同类型子元素。
示例:
cssp:nth-last-of-type(1) {
font-weight: bold;
}123html
1
23
字重加粗。
兼容性: 所有现代浏览器支持。
nth-last-of-type
:only-child 描述: 父元素的唯一子元素。
示例:
cssp:only-child {
background: yellow;
}123html
唯一
是唯一子元素，背景色为黄色。
兼容性: 所有现代浏览器支持。
only-child
:only-of-type 描述: 父元素中唯一的一个同类型子元素。
示例:
cssp:only-of-type {
font-size: 20px;
}123html
唯一
其他是唯一
，字体大小为 20px。
兼容性: 所有现代浏览器支持。
only-of-type
:empty 描述: 没有子元素或文本的元素。
示例:
cssdiv:empty {
height: 50px;
background: grey;
}1234html
1效果: 空的兼容性: 所有现代浏览器支持。
empty
==状态伪类== :checked 描述: 选中的表单元素。
示例:
cssinput[type="checkbox"]:checked {
accent-color: green;
}123html1效果: 选中的复选框颜色变为绿色。
兼容性: 所有现代浏览器支持。（在 macOS 系统上，对
checked
:disabled 描述: 禁用的表单元素。
示例:
cssinput:disabled {
background: grey;
}123html1效果: 禁用的输入框背景色为灰色。
兼容性: 所有现代浏览器支持。
disabled
:enabled 描述: 启用的表单元素。
示例:
cssinput:enabled {
background: white;
}123html1效果: 启用的输入框背景色为白色。
兼容性: 所有现代浏览器支持。
enabled
:default 描述: 默认选中的表单元素。
示例:
cssinput:default {
outline: 2px solid green;
}123html1效果: 默认选中的单选框添加绿色轮廓。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
default
:indeterminate 描述: 不确定状态的表单元素。
示例:
cssinput:indeterminate {
outline: 2px solid orange;
}123html1效果: 不确定状态的复选框添加橙色轮廓。
兼容性: 大部分现代浏览器支持。
indeterminate
:valid 描述: 输入合法的表单元素。
示例:
cssinput:valid {
border: 1px solid green;
}123html1效果: 输入合法的邮箱字段添加绿色边框。
兼容性: 所有现代浏览器支持。
valid
:invalid 描述: 输入不合法的表单元素。
示例:
cssinput:invalid {
border: 1px solid red;
}123html1效果: 输入不合法的邮箱字段添加红色边框。
兼容性: 所有现代浏览器支持。
invalid
:in-range 描述: 值在范围内的表单元素。
示例:
cssinput:in-range {
background: white;
}123html1效果: 值在范围内的输入框背景色为白色。
兼容性: 大部分现代浏览器支持。
in-range
:out-of-range 描述: 值不在范围内的表单元素。
示例:
cssinput:out-of-range {
background: pink;
}123html1效果: 值不在范围内的输入框背景色为粉色。
兼容性: 大部分现代浏览器支持。
out-of-range
:required 描述: 必填的表单元素。
示例:
cssinput:required {
border: 1px solid red;
}123html1效果: 必填输入框添加红色边框。
兼容性: 所有现代浏览器支持。
required
:optional 描述: 非必填的表单元素。
示例:
cssinput:optional {
border: 1px solid grey;
}123html1效果: 非必填输入框添加灰色边框。
兼容性: 所有现代浏览器支持。
optional
:read-only 描述: 只读的表单元素。
示例:
cssinput:read-only {
background: lightgrey;
}123html1效果: 只读输入框背景色为浅灰色。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
read-only
:read-write 描述: 可编辑的表单元素。
示例:
cssinput:read-write {
background: white;
}123html1效果: 可编辑输入框背景色为白色。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
read-write
:placeholder-shown 描述: 显示占位符的输入框。
示例:
cssinput:placeholder-shown {
color: grey;
}123html1效果: 显示占位符的输入框文本颜色为灰色。
兼容性: 大部分现代浏览器支持。
placeholder-shown
:autofill 描述: 浏览器自动填充的输入框。
示例:
cssinput:autofill {
background: lightyellow;
}123html1效果: 自动填充的输入框背景色为浅黄色。
兼容性: 除了IE浏览器，大多数现代浏览器支持。
autofill
:user-valid 描述: 用户交互后合法的表单元素。
示例:
cssinput:user-valid {
border: 1px solid green;
}123html1效果: 用户交互后合法的输入框添加绿色边框。
兼容性: 2023年后现代浏览器支持，支持有限。Chrome 119+版本支持，
user-valid
:user-invalid 描述: 用户交互后不合法的表单元素。
示例:
cssinput:user-invalid {
border: 1px solid red;
}123html1效果: 用户交互后不合法的输入框添加红色边框。
兼容性: 2023年后现代浏览器支持，支持有限。Chrome 119+版本支持，
在这里插入图片描述
:blank 描述: 空值的用户输入元素。示例:cssinput:blank {
border: 1px solid yellow;
}123html1效果: 空值的输入框添加黄色边框。兼容性: 这是一项实验性技术 #blank-pseudo，大部分浏览器不支持。==逻辑伪类== :not(selector) 描述: 不匹配指定选择器的元素。
示例:
cssdiv:not(.highlight) {
background: white;
}123html
兼容性: 所有现代浏览器支持。
not
:not(a, .b, [c]) 描述: 匹配不同时满足列表中任何一个选择器的元素（即不匹配 a 标签、不匹配类名为 .b、不匹配带有属性 [c] 的元素）。示例:css/* 选择非链接（a）、非警告类（.warning）、非禁用状态（[disabled]）的按钮 */
button:not(a, .warning, [disabled]) {
background-color: #4CAF50; /* 绿色背景 */
cursor: pointer;
}
/* 为被排除的元素添加对比样式（仅用于演示） */
button:a, button.warning, button[disabled] {
background-color: #f44336; /* 红色背景 */
cursor: not-allowed;
}1234567891011html
1234效果: 仅 应用绿色背景（因不匹配 a、.warning、[disabled] 中的任何一个）。
兼容性: 2021年后大部分现代浏览器支持，支持有限。Chrome 88+版本以上支持。(可使用链式 :not() 替代)
not(a, .b, [c])
:is(selector1, selector2) 描述: 匹配任一指定选择器的元素。
示例:
cssbutton:is(:hover, :focus) {
background-color: yellow;
}123html1效果: 按钮悬停或获得焦点时，背景色为黄色。
兼容性: 除了IE浏览器，大多数现代浏览器支持。
is
:where(selector1, selector2) 描述: 类似 :is()，但不增加特异性。
示例:
css:where(h1, h2, h3) {
font-weight: bold;
}123html
标题1
标题2
1效果: h1、h2、h3 字重加粗。兼容性: 除了IE浏览器，大多数现代浏览器支持。
where
:has(selector) 描述: 包含指定选择器子元素的元素。
示例:
cssdiv:has(p) {
border: 1px solid black;
}123html
内容
的
兼容性: 2022年后大部分现代浏览器支持，支持有限，Chrome 105+版本以上支持。
has
==其他伪类== :root 描述: 文档的根元素（通常为 ）。
示例:
css:root {
--main-color: #3498db;
}123html
内容1效果: 定义全局 CSS 变量。兼容性: 所有现代浏览器支持。
root
:lang(language) 描述: 根据 lang 属性选择元素。
示例:
cssp:lang(en) {
color: blue;
}123html
English
1效果: lang="en" 的段落颜色为蓝色。兼容性: 所有现代浏览器支持。
lang
:target 描述: URL 片段标识的目标元素。
示例:
css:target {
background: yellow;
}123html
兼容性: 所有现代浏览器支持。
target
:target-within 描述: 目标元素或包含目标元素的元素。示例:cssdiv:target-within {
border: 1px solid blue;
}123html
目标
示例:
css:scope {
background: lightgrey;
}123html
内容
兼容性: 除了IE浏览器，大部分现代浏览器支持。
scope
:current 描述: 时间维度画布中当前显示的元素。示例:cssp:current {
color: red;
}123html
当前
1效果: 当前显示的元素颜色为红色。兼容性: 这是一项实验性技术 #the-current-pseudo，大部分浏览器不支持。:past 描述: 时间维度画布中过去的元素。示例:
cssp:past {
opacity: 0.5;
}123html
过去
1效果: 过去的元素透明度为 0.5。兼容性: 支持有限。IE浏览器以及火狐浏览器所有版本均不支持，Edge浏览器仅在2020年后的版本支持。
past
:future 描述: 时间维度画布中未来的元素。
示例:
cssp:future {
opacity: 0.5;
}123html
未来
1效果: 未来的元素透明度为 0.5。兼容性: 支持有限。IE浏览器以及火狐浏览器所有版本均不支持，Edge浏览器仅在2020年后的版本支持。
future
:dir(ltr) 描述: 左到右方向的元素。
示例:
cssp:dir(ltr) {
text-align: left;
}123html
文本
1效果: 左到右方向的元素左对齐。兼容性: 支持有限。 2023年后的大部分现代浏览器支持。 火狐浏览器可支持2012年后的版本，需添加-moz-前缀。
dir
:modal 描述: 模态对话框元素。
示例:
cssdialog:modal {
background: white;
}123html1效果: 模态对话框背景色为白色。
兼容性: 支持有限，仅2022年后大部分浏览器支持。Chrome 105+以上版本支持。
modal
:fullscreen 描述: 全屏模式的元素。
示例:
cssvideo:fullscreen {
border: none;
}123html1效果: 全屏模式的视频移除边框。
兼容性: 支持有限，早期版本需添加-webkit- 以及-moz-前缀。
fullscreen
:picture-in-picture 描述: 画中画模式的元素。
示例:
cssvideo:picture-in-picture {
border: 1px solid black;
}123html1效果: 画中画模式的视频添加黑色边框。
兼容性: 支持有限，仅2023年后大部分现代浏览器支持，Chrome 110+以上版本支持，火狐浏览器以及IE浏览器所有版本均不支持。
picture-in-picture
:popover-open 描述: 当前显示的弹出窗口元素。
示例:
css:popover-open {
display: block;
}123html
兼容性: 支持有限，仅2023年后大部分现代浏览器支持，Chrome 114+以上版本支持。
popover-open
:host 描述: 匹配 Shadow DOM 中所有 shadow root 的根元素，可加括号后接选择器，匹配符合条件的根元素。
示例:
css:host(.active) {
background: blue;
}123html
兼容性: 除了IE浏览器，大多数现代浏览器支持。(2020年以前的Edge浏览器不支持)
host
:host-context(selector) 描述: 匹配 Shadow DOM 中符合指定选择器条件的元素。
示例:
css:host-context(.dark-theme) {
color: white;
}123html
兼容性: 支持有限，苹果浏览器、火狐浏览器以及IE浏览器所有版本均不支持，Edge浏览器仅支持2020年后的版本
host-context
:left 描述: 与 @page 规则一起使用，选择打印文档的所有左侧页面。
示例:
css@page :left {
margin-left: 4cm;
}123html
打印内容
1效果: 打印文档的左侧页面左边距为 4cm。兼容性: 大部分现代浏览器支持，火狐浏览器所有版本均不支持。
left
:right 描述: 与 @page 规则一起使用，选择打印文档的所有右侧页面。
示例:
css@page :right {
margin-right: 4cm;
}123html
打印内容
1效果: 打印文档的右侧页面右边距为 4cm。兼容性: 大部分现代浏览器支持，火狐浏览器所有版本均不支持。
right
:state() 描述: 选择具有指定自定义状态的自定义元素。
示例:
cssmy-element:state(highlighted) {
border: 2px solid yellow;
}123html
兼容性: 支持有限，需检查自定义元素支持情况，仅2024年后的部分现代浏览器支持。
state
:open 描述: 匹配处于打开状态的元素（如
示例:
cssdetails:open {
background: lightblue;
}123html
内容
1234效果: 打开状态的
兼容性: 支持有限，部分浏览器仅2025年后的版本支持，Chrome 133+以上版本支持，safari浏览器以及Opera浏览器所有版本均不支持。
open
:closed 描述: 匹配处于关闭状态的元素（如
background: lightgrey;
}123html
内容
1234效果: 关闭状态的
示例:
cssvideo:muted {
border: 1px solid grey;
}123html1效果: 静音的视频元素添加灰色边框。
兼容性: 支持有限，仅有Safari 15.4+以上版本浏览器支持。
muted
:paused 描述: 匹配暂停状态的音频或视频元素。
示例:
cssvideo:paused {
opacity: 0.7;
}123html1效果: 暂停的视频元素透明度为 0.7。
兼容性: 支持有限，仅有Safari 15.4+以上版本浏览器支持。
paused
:playing 描述: 匹配播放状态的音频或视频元素。
示例:
cssvideo:playing {
border: 2px solid green;
}123html1效果: 播放中的视频元素添加绿色边框。
兼容性: 支持有限，仅有Safari 15.4+以上版本浏览器支持。
playing
:seeking 描述: 匹配音频或视频元素正在寻找（跳转）到新位置的状态。
示例:
cssvideo:seeking {
border: 2px dashed blue;
}123html1效果: 正在跳转的视频元素添加蓝色虚线边框。
兼容性: 支持有限，仅有Safari 15.4+以上版本浏览器支持。
seeking
:buffering 描述: 匹配音频或视频元素正在缓冲的状态。
示例:
cssvideo:buffering {
background: lightyellow;
}123html1效果: 缓冲中的视频元素背景色为浅黄色。
兼容性: 支持有限，仅有Safari 15.4+以上版本浏览器支持。
buffering
:stalled 描述: 匹配音频或视频元素因数据不足而暂停加载的状态。
示例:
cssvideo:stalled {
border: 1px solid red;
}123html1效果: 因数据不足暂停的视频元素添加红色边框。
兼容性: 支持有限，仅有Safari 15.4+以上版本浏览器支持。
stalled
:xr-overlay 描述: 匹配 XR（扩展现实）会话中的叠加层元素。
示例:
cssdiv:xr-overlay {
background: rgba(0,0,0,0.5);
}123html
兼容性: 支持有限，大部分浏览器仅2020年后的版本支持，Chrome 83+以上版本支持，Safari浏览器、火狐浏览器以及IE浏览器所有版本均不支持。
xr-overlay
==6. 伪元素选择器 (Pseudo-elements)== ::before 描述: 在元素内容前插入内容。
示例:
cssp::before {
content: "★ ";
}123html
文本
1效果: 段落前插入星号。兼容性: 所有现代浏览器支持。
before
::after 描述: 在元素内容后插入内容。示例:cssp::after {
content: " ★";
}123html
文本
1效果: 段落后插入星号。兼容性: 所有现代浏览器支持。after::first-line 描述: 选择元素的第一行。示例:
cssp::first-line {
color: blue;
}123html
第一行
第二行
兼容性: 所有现代浏览器支持。
first-line
::first-line (SVG \
fill: blue;
}123html
第二行文本
123效果: SVG
::first-letter 描述: 选择元素的第一个字母。
示例:
cssp::first-letter {
color: red;
}123html
文本
1效果: 段落第一个字母颜色为红色。兼容性: 所有现代浏览器支持。
first-letter
::first-letter (SVG \
fill: red;
font-size: 1.5em;
}1234html
123效果: SVG
::selection 描述: 用户选中的文本。
示例:
css::selection {
background: yellow;
color: black;
}1234html
选中文本
1效果: 选中文本背景色为黄色，文字为黑色。兼容性: 所有现代浏览器支持，Safari移动端所有版本均不支持
selection
::placeholder 描述: 输入框的占位符文本。
示例:
cssinput::placeholder {
color: #999;
font-style: italic;
}1234html1效果: 输入框占位符文本为灰色斜体。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
placeholder
::marker 描述: 选择列表项的标记。
示例:
cssli::marker {
color: red;
}123html
- 项目
兼容性: 除了IE浏览器，大部分现代浏览器支持。
marker
::backdrop 描述: 选择对话框或全屏元素的背景。
示例:
cssdialog::backdrop {
background: rgba(0,0,0,0.5);
}123html1效果: 对话框背景半透明黑色。
兼容性: 所有现代浏览器支持。
backdrop
::cue 描述: 选择媒体元素的字幕。
示例:
cssvideo::cue {
color: white;
}123html1效果: 视频字幕颜色为白色。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
cue
::part(name) 描述: 匹配 shadow tree 中满足 part 条件的元素。
示例:
css::part(my-part) {
background: blue;
}123html
兼容性: 支持有限，大部分浏览器仅在2020年后的版本支持，Chrome 73+以上版本支持。
part
::file-selector-button 描述: 选择文件上传按钮。
示例:
cssinput::file-selector-button {
background: green;
}123html1效果: 文件上传按钮背景色为绿色。
兼容性: 所有现代浏览器支持，2021年之前大部分浏览器需使用非标准名称::-webkit-file-upload-button，IE浏览器10以及11版本需使用非标准名称::-ms-browse。
file-selector-button
::slotted(selector) 描述: 匹配模板中的插槽元素。
示例:
css::slotted(p) {
color: red;
}123html 内容
元素颜色为红色。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
slotted
:has-slotted 描述: 匹配 Shadow DOM 中包含指定插槽内容的宿主元素。
示例:
css:has-slotted(p) {
border: 1px solid blue;
}123html 内容 插槽内容，则添加蓝色边框。 兼容性: Chrome 134+，2025年新特性，截止本文发布(2025/06)，仅有Chrome浏览器、Edge浏览器以及火狐浏览器最新版本支持。 has-slotted ::target-text 描述: 匹配当前文本锚点所在的文本。 示例: css::target-text { background: yellow; }123html 文本内容
兼容性: 大部分现代浏览器仅在2021年后版本支持，Chrome 89+以上版本支持。
target-text
::column 描述: 选择多列布局中的列元素。
示例:
cssdiv::column {
border: 1px solid black;
}123html
兼容性: Chrome 134+，2025年新特性，截止本文发布(2025/06)，仅有Chrome浏览器以及Edge浏览器最新版本支持。
column
::picker() 描述: 选择表单控件的 picker 界面（如日期选择器）。
示例:
cssinput::picker() {
background: lightblue;
}123html1效果: 日期选择器的 picker 界面背景色为浅蓝色。
兼容性: Chrome 134+，2025年新特性，截止本文发布(2025/06)，仅有Chrome浏览器以及Edge浏览器最新版本支持。
picker
::checkmark 描述: 选择复选框或单选框的勾选标记。
示例:
cssinput[type="checkbox"]::checkmark {
color: green;
}123html1效果: 复选框的勾选标记颜色为绿色。
兼容性: Chrome 133+，2025年新特性，截止本文发布(2025/06)，仅有Chrome浏览器以及Edge浏览器最新版本支持。
checkmark
==7. 选择器优先级== 选择器的优先级决定了当多个样式规则冲突时，哪个规则生效。以下是优先级计算规则：
选择器类型权重值示例行内样式1000style="..."ID 选择器100#header类/属性/伪类10.btn, [type="text"], :hover元素/伪元素1p, ::before通用选择器0*注意: !important 优先级最高，但应避免使用，因其破坏样式可维护性。示例: #main .highlight p 的优先级为 100 + 10 + 1 = 111。参考资料 MDN Web Docs - CSS SelectorsCSS-Tricks - CSS SelectorsW3Schools - CSS Selectors ReferenceGeeksforGeeks - CSS SelectorsCan I Use - Browser Compatibility