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