CSS 史上最全面的选择器大全以及兼容性整理（共计 118 个）

CSS 选择器是 CSS 的核心工具，用于选择 HTML 元素并应用样式。它们就像网页中的“精准定位器”，可以根据元素的类型、属性、状态或位置进行选择。随着 web 技术的发展，CSS 选择器不断扩展，提供了更强大的功能。本文档整理了截至 2025 年的所有 CSS 选择器，共计118个，旨在为初学者和资深开发者提供全面、易懂的指南。

本文包含：
基本选择器：6 个
组合器：6 个
嵌套选择器：1 个
属性选择器：9 个
伪类选择器：71 个
伪元素选择器：25 个
使用 Can I Use 验证浏览器支持，尝试组合选择器实现复杂样式。

==1. 基本选择器==

`类型选择器 (Type Selector)`

描述: 选择特定类型的 HTML 元素（如 <p>、<div>）。

示例:

css

p {
  color: red;
}

html

<p>这是一个段落。</p>

效果: 所有 <p> 元素的文本颜色变为红色。
兼容性: 所有现代浏览器（如 Chrome、Firefox、Safari、Edge）支持。
类型选择器

`通用选择器 (Universal Selector)`

描述: 使用 * 选择页面中的所有元素，常用于全局样式重置。

示例:

css

* {
  margin: 0;
  padding: 0;
}

html

<div>内容</div>
<p>段落</p>

效果: 所有元素的外边距和内边距重置为 0。
兼容性: 所有现代浏览器支持，但需谨慎使用以避免性能问题。
通用选择器

`类选择器 (Class Selector)`

描述: 使用 . 前缀选择具有特定 class 属性的元素。

示例:

css

.highlight {
  background-color: yellow;
}

html

<p class="highlight">高亮文本</p>

效果: 具有 class="highlight" 的元素背景色变为黄色。
兼容性: 所有现代浏览器支持。
类选择器

`ID 选择器 (ID Selector)`

描述: 使用 # 前缀选择具有特定 id 属性的唯一元素。

示例:

css

#main {
  width: 100%;
}

html

<div id="main">主要内容</div>

效果: ID 为 main 的元素宽度设置为 100%。
兼容性: 所有现代浏览器支持，ID 应在页面中唯一。
ID 选择器

`交集选择器 (Compound Selector)`

描述: 同时满足多个条件的元素（连续书写无空格）。

示例:

css

p.highlight {
  border: 2px solid gold;
}

html

<p class="highlight">高亮段落</p>
<div class="highlight">不匹配</div>

效果: 同时是 <p> 标签且具有 highlight 类的元素添加金色边框。
兼容性: CSS 的基础功能，所有浏览器均支持。兼容性取决于交集中使用的最新选择器或伪类。

`并集选择器 (Multiple Selector)`

描述: 使用逗号分隔多个选择器，选择满足任一条件的元素。

示例:

css

h1, h2, .title {
  font-weight: bold;
}

html

<h1>标题1</h1>
<h2>标题2</h2>
<p class="title">标题段落</p>

效果: 所有 <h1>、<h2> 和具有 title 类的元素字体加粗。
兼容性: 所有浏览器均支持。

==2. 组合器 (Combinators)==

`后代选择器 (Descendant Combinator)`

描述: 使用空格选择某个元素内的所有后代元素。

示例:

css

div p {
  color: blue;
}

html

<div>
  <p>这是一个段落。</p>
  <span><p>嵌套段落</p></span>
</div>

效果: <div> 内的所有 <p> 元素文本颜色变为蓝色。
兼容性: 所有现代浏览器支持。
CSS 2.1

`子选择器 (Child Combinator)`

描述: 使用 > 选择某个元素的直接子元素。

示例:

css

div > p {
  color: green;
}

html

<div>
  <p>直接子段落</p>
  <span><p>非直接子段落</p></span>
</div>

效果: 仅 <div> 的直接子 <p> 元素文本颜色变为绿色。
兼容性: 所有现代浏览器支持。
子选择器

`相邻同胞选择器 (Adjacent Sibling Combinator)`

描述: 使用 + 选择紧跟在某个元素后的同胞元素。

示例:

css

h1 + p {
  font-size: 18px;
}

html

<h1>标题</h1>
<p>紧邻段落</p>
<p>非紧邻段落</p>

效果: 紧跟 <h1> 后的第一个 <p> 字体大小为 18px。
兼容性: 所有现代浏览器支持。
相邻同胞选择器

`一般同胞选择器 (General Sibling Combinator)`

描述: 使用 ~ 选择某个元素之后的所有同胞元素。

示例:

css

h1 ~ p {
  margin-left: 20px;
}

html

<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>

效果: <h1> 后的所有 <p> 元素左边距为 20px。
兼容性: 所有现代浏览器支持。
一般同胞选择器

`列组合器 (Column Combinator)`

描述: 使用 || 选择表格中同一列的元素。

示例:

css

col || td {
  border: 1px solid black;
}

html

<table>
  <col>
  <tr><td>单元格</td></tr>
</table>

效果: 同一列中的 <td> 元素添加边框。
兼容性: 这是一项实验性技术 #selectordef-column，大部分浏览器不支持。
在这里插入图片描述

`命名空间分隔符 (Namespace Separator)`

描述: 使用 | 选择特定命名空间的元素（如 SVG）。

示例:

css

SVG|a {
  fill: red;
}

html

<svg><a>SVG 链接</a></svg>

效果: SVG 命名空间中的 <a> 元素填充颜色为红色。
兼容性: 所有现代浏览器支持。

命名空间分隔符

==3. 嵌套选择器 (Nesting Selector)==

`&`

描述: 用于 CSS 原生嵌套语法，表示当前选择器的父选择器，可简化选择器层级。（类似Sass以及Less的嵌套语法）

示例:

css

.parent {
  color: black;
  & .child {
    color: blue;
  }
}

html

<div class="parent">
  <div class="child">子元素</div>
</div>

效果: .parent 内的 .child 元素文本颜色为蓝色，等同于 .parent .child。
兼容性: 支持有限，大部分浏览器仅在2023年后的版本支持
嵌套选择器

==4. 属性选择器 (Attribute Selectors)==

`[attr]`

描述: 选择具有特定属性的元素。

示例:

css

a[href] {
  color: blue;
}

html

<a href="https://example.com">链接</a>

效果: 具有 href 属性的 <a> 元素颜色为蓝色。
兼容性: CSS 2.1选择器，所有现代浏览器支持。
属性选择器

`[attr=value]`

描述: 选择属性值等于特定值的元素。

示例:

css

input[type="text"] {
  background: yellow;
}

html

<input type="text">

效果: 类型为 text 的 <input> 背景色为黄色。
兼容性: CSS 2.1选择器，所有现代浏览器支持。
属性选择器

`[attr~=value]`

描述: 选择属性值包含特定单词的元素（空格分隔）。

示例:

css

p[title~="flower"] {
  font-style: italic;
}

html

<p title="red flower">文本</p>

效果: title 属性包含单词 flower 的 <p> 元素为斜体。
兼容性: CSS 2.1选择器，所有现代浏览器支持。

CSS 2.1

`[attr|=value]`

描述: 选择属性值为特定值或以特定值开头的元素（用于语言子码）。

示例:

css

[lang|="en"] {
  color: green;
}

html

<p lang="en-US">文本</p>

效果: lang 属性以 en 开头的元素颜色为绿色。
兼容性: CSS 2.1选择器，所有现代浏览器支持。
CSS 2.1

`[attr^=value]`

描述: 选择属性值以特定值开头的元素。

示例:

css

a[href^="https"] {
  color: purple;
}

html

<a href="https://example.com">链接</a>

效果: href 属性以 https 开头的 <a> 元素颜色为紫色。
兼容性: CSS 3选择器，所有现代浏览器支持。
CSS 3

`[attr$=value]`

描述: 选择属性值以特定值结尾的元素。

示例:

css

a[href$=".pdf"] {
  background: yellow;
}

html

<a href="doc.pdf">文档</a>

效果: href 属性以 .pdf 结尾的 <a> 元素背景色为黄色。
兼容性: CSS 3选择器，所有现代浏览器支持。
CSS 3

`[attr*=value]`

描述: 选择属性值包含特定值的元素。

示例:

css

a[href*="example"] {
  text-decoration: underline;
}

html

<a href="https://example.com">链接</a>

效果: href 属性包含 example 的 <a> 元素添加下划线。
兼容性: CSS 3选择器，所有现代浏览器支持。
CSS 3

`[attr=value i]`

描述: 选择属性值等于特定值（忽略大小写）的元素。

示例:

css

a[href="https://example.com" i] {
  color: green;
}

html

<a href="HTTPS://example.com">链接</a>

效果: href 属性忽略大小写匹配 https://example.com 的 <a> 元素颜色为绿色。
兼容性: 除了IE浏览器，其他所有现代浏览器支持。
attr=value i

`[attr=value s]`

描述: 选择属性值严格等于特定值的元素（区分大小写）。

示例:

css

a[href="https://example.com" s] {
  color: red;
}

html

<a href="https://example.com">链接</a>

效果: href 属性严格匹配 https://example.com 的 <a> 元素颜色为红色。
兼容性: 仅火狐浏览器支持。
attr=value s

==5. 伪类选择器 (Pseudo-classes)==

伪类选择器用于选择元素的特定状态或位置，按功能分组如下：

==交互伪类==

`:hover`

描述: 鼠标悬停在元素上时。

示例:

css

a:hover {
  color: red;
}

html

<a href="#">链接</a>

效果: 鼠标悬停时链接颜色变为红色。
兼容性: 所有现代浏览器支持。
hover

`:active`

描述: 元素被激活（如点击）时。

示例:

css

button:active {
  background: darkblue;
}

html

<button>点击</button>

效果: 点击按钮时背景色变为深蓝色。
兼容性: 所有现代浏览器支持。
active

`:focus`

描述: 元素获得焦点时。

示例:

css

input:focus {
  outline: none;
}

html

<input type="text">

效果: 输入框获得焦点时移除默认轮廓。
兼容性: 所有现代浏览器支持。
focus

`:focus-within`

描述: 元素或其后代获得焦点时。

示例:

css

form:focus-within {
  border: 2px solid blue;
}

html

<form><input type="text"></form>

效果: 表单或其输入框获得焦点时，边框变为蓝色。
兼容性: 除了IE浏览器，大多数现代浏览器支持。
focus-within

`:focus-visible`

描述: 元素通过键盘导航获得焦点时。

示例:

css

a:focus-visible {
  outline: 2px solid red;
}

html

<a href="#">链接</a>

效果: 通过键盘导航获得焦点时显示红色轮廓。
兼容性: 除了IE浏览器，大多数现代浏览器支持。
focus-visible

`:link`

描述: 未访问的链接。

示例:

css

a:link {
  color: blue;
}

html

<a href="#">链接</a>

效果: 未访问链接颜色为蓝色。
兼容性: 所有现代浏览器支持。

在这里插入图片描述

`:visited`

描述: 已访问的链接。

示例:

css

a:visited {
  color: purple;
}

html

<a href="#">链接</a>

效果: 已访问链接颜色为紫色。
兼容性: 所有现代浏览器支持，样式受隐私限制。
visited

`:any-link`

描述: 未访问或已访问的链接。

示例:

css

a:any-link {
  text-decoration: underline;
}

html

<a href="#">链接</a>

效果: 所有链接添加下划线。
兼容性: 除了IE浏览器，大多数现代浏览器支持。
any-link

==结构伪类==

`:first-child`

描述: 父元素的第一个子元素。

示例:

css

p:first-child {
  margin-top: 0;
}

html

<div><p>第一个</p><p>第二个</p></div>

效果: 第一个 <p> 上边距为 0。
兼容性: 所有现代浏览器支持。
first-child

`:last-child`

描述: 父元素的最后一个子元素。

示例:

css

p:last-child {
  margin-bottom: 0;
}

html

<div><p>第一个</p><p>最后一个</p></div>

效果: 最后一个 <p> 下边距为 0。
兼容性: 所有现代浏览器支持。
last-child

`:nth-child(n)`

描述: 父元素的第 n 个子元素。

示例:

css

li:nth-child(2) {
  color: red;
}

html

<ul><li>1</li><li>2</li></ul>

效果: 第二个 <li> 颜色变为红色。
兼容性: 所有现代浏览器支持。
nth-child

`:nth-last-child(n)`

描述: 从末尾计数的第 n 个子元素。

示例:

css

li:nth-last-child(2) {
  color: red;
}

html

<ul><li>1</li><li>2</li><li>3</li></ul>

效果: 倒数第二个 <li> 颜色变为红色。
兼容性: 所有现代浏览器支持。
nth-last-child

`:first-of-type`

描述: 父元素的第一个同类型子元素。

示例:

css

p:first-of-type {
  font-weight: bold;
}

html

<div><span>其他</span><p>第一个</p></div>

效果: 第一个 <p> 字重加粗。
兼容性: 所有现代浏览器支持。
first-of-type

`:last-of-type`

描述: 父元素的最后一个同类型子元素。

示例:

css

p:last-of-type {
  text-decoration: underline;
}

html

<div><p>第一个</p><p>最后一个</p></div>

效果: 最后一个 <p> 添加下划线。
兼容性: 所有现代浏览器支持。
last-of-type

`:nth-of-type(n)`

描述: 父元素的第 n 个同类型子元素。

示例:

css

p:nth-of-type(2) {
  color: green;
}

html

<div><p>1</p><span>2</span><p>3</p></div>

效果: 第二个 <p> 颜色变为绿色。
兼容性: 所有现代浏览器支持。
nth-of-type

`:nth-last-of-type(n)`

描述: 从末尾计数的第 n 个同类型子元素。

示例:

css

p:nth-last-of-type(1) {
  font-weight: bold;
}

html

<div><p>1</p><span>2</span><p>3</p></div>

效果: 最后一个 <p> 字重加粗。
兼容性: 所有现代浏览器支持。
nth-last-of-type

`:only-child`

描述: 父元素的唯一子元素。

示例:

css

p:only-child {
  background: yellow;
}

html

<div><p>唯一</p></div>

效果: 如果 <p> 是唯一子元素，背景色为黄色。
兼容性: 所有现代浏览器支持。
only-child

`:only-of-type`

描述: 父元素中唯一的一个同类型子元素。

示例:

css

p:only-of-type {
  font-size: 20px;
}

html

<div><p>唯一</p><span>其他</span></div>

效果: 如果 <p> 是唯一 <p>，字体大小为 20px。
兼容性: 所有现代浏览器支持。
only-of-type

`:empty`

描述: 没有子元素或文本的元素。

示例:

css

div:empty {
  height: 50px;
  background: grey;
}

html

<div></div>

效果: 空的 <div> 高度为 50px，背景色为灰色。
兼容性: 所有现代浏览器支持。
empty

==状态伪类==

`:checked`

描述: 选中的表单元素。

示例:

css

input[type="checkbox"]:checked {
  accent-color: green;
}

html

<input type="checkbox">

效果: 选中的复选框颜色变为绿色。
兼容性: 所有现代浏览器支持。（在 macOS 系统上，对 <option> 元素进行样式设置通常不起作用。）
checked

`:disabled`

描述: 禁用的表单元素。

示例:

css

input:disabled {
  background: grey;
}

html

<input type="text" disabled>

效果: 禁用的输入框背景色为灰色。
兼容性: 所有现代浏览器支持。
disabled

`:enabled`

描述: 启用的表单元素。

示例:

css

input:enabled {
  background: white;
}

html

<input type="text">

效果: 启用的输入框背景色为白色。
兼容性: 所有现代浏览器支持。
enabled

`:default`

描述: 默认选中的表单元素。

示例:

css

input:default {
  outline: 2px solid green;
}

html

<input type="radio" checked>

效果: 默认选中的单选框添加绿色轮廓。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
default

`:indeterminate`

描述: 不确定状态的表单元素。

示例:

css

input:indeterminate {
  outline: 2px solid orange;
}

html

<input type="checkbox" indeterminate>

效果: 不确定状态的复选框添加橙色轮廓。
兼容性: 大部分现代浏览器支持。
indeterminate

`:valid`

描述: 输入合法的表单元素。

示例:

css

input:valid {
  border: 1px solid green;
}

html

<input type="email" value="test@example.com">

效果: 输入合法的邮箱字段添加绿色边框。
兼容性: 所有现代浏览器支持。
valid

`:invalid`

描述: 输入不合法的表单元素。

示例:

css

input:invalid {
  border: 1px solid red;
}

html

<input type="email" value="invalid">

效果: 输入不合法的邮箱字段添加红色边框。
兼容性: 所有现代浏览器支持。
invalid

`:in-range`

描述: 值在范围内的表单元素。

示例:

css

input:in-range {
  background: white;
}

html

<input type="number" min="1" max="10" value="5">

效果: 值在范围内的输入框背景色为白色。
兼容性: 大部分现代浏览器支持。
in-range

`:out-of-range`

描述: 值不在范围内的表单元素。

示例:

css

input:out-of-range {
  background: pink;
}

html

<input type="number" min="1" max="10" value="15">

效果: 值不在范围内的输入框背景色为粉色。
兼容性: 大部分现代浏览器支持。
out-of-range

`:required`

描述: 必填的表单元素。

示例:

css

input:required {
  border: 1px solid red;
}

html

<input type="text" required>

效果: 必填输入框添加红色边框。
兼容性: 所有现代浏览器支持。
required

`:optional`

描述: 非必填的表单元素。

示例:

css

input:optional {
  border: 1px solid grey;
}

html

<input type="text">

效果: 非必填输入框添加灰色边框。
兼容性: 所有现代浏览器支持。
optional

`:read-only`

描述: 只读的表单元素。

示例:

css

input:read-only {
  background: lightgrey;
}

html

<input type="text" readonly>

效果: 只读输入框背景色为浅灰色。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
read-only

`:read-write`

描述: 可编辑的表单元素。

示例:

css

input:read-write {
  background: white;
}

html

<input type="text">

效果: 可编辑输入框背景色为白色。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
read-write

`:placeholder-shown`

描述: 显示占位符的输入框。

示例:

css

input:placeholder-shown {
  color: grey;
}

html

<input type="text" placeholder="输入内容">

效果: 显示占位符的输入框文本颜色为灰色。
兼容性: 大部分现代浏览器支持。
placeholder-shown

`:autofill`

描述: 浏览器自动填充的输入框。

示例:

css

input:autofill {
  background: lightyellow;
}

html

<input type="text" name="username">

效果: 自动填充的输入框背景色为浅黄色。
兼容性: 除了IE浏览器，大多数现代浏览器支持。
autofill

`:user-valid`

描述: 用户交互后合法的表单元素。

示例:

css

input:user-valid {
  border: 1px solid green;
}

html

<input type="email" value="test@example.com">

效果: 用户交互后合法的输入框添加绿色边框。
兼容性: 2023年后现代浏览器支持，支持有限。Chrome 119+版本支持，
user-valid

`:user-invalid`

描述: 用户交互后不合法的表单元素。

示例:

css

input:user-invalid {
  border: 1px solid red;
}

html

<input type="email" value="invalid">

效果: 用户交互后不合法的输入框添加红色边框。
兼容性: 2023年后现代浏览器支持，支持有限。Chrome 119+版本支持，
在这里插入图片描述

`:blank`

描述: 空值的用户输入元素。

示例:

css

input:blank {
  border: 1px solid yellow;
}

html

<input type="text">

效果: 空值的输入框添加黄色边框。
兼容性: 这是一项实验性技术 #blank-pseudo，大部分浏览器不支持。

==逻辑伪类==

`:not(selector)`

描述: 不匹配指定选择器的元素。

示例:

css

div:not(.highlight) {
  background: white;
}

html

<div>普通</div><div class="highlight">高亮</div>

效果: 不具有 highlight 类的 <div> 背景色为白色。
兼容性: 所有现代浏览器支持。
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;
}

html

<button>普通按钮</button> <!-- 匹配 :not()，显示绿色 -->
<a href="#" class="button">链接按钮</a> <!-- 匹配 a，显示红色 -->
<button class="warning">警告按钮</button> <!-- 匹配 .warning，显示红色 -->
<button disabled>禁用按钮</button> <!-- 匹配 [disabled]，显示红色 -->

效果: 仅 <button>普通按钮</button> 应用绿色背景（因不匹配 a、.warning、[disabled] 中的任何一个）。
兼容性: 2021年后大部分现代浏览器支持，支持有限。Chrome 88+版本以上支持。(可使用链式 :not() 替代)
not(a, .b, [c])

`:is(selector1, selector2)`

描述: 匹配任一指定选择器的元素。

示例:

css

button:is(:hover, :focus) {
  background-color: yellow;
}

html

<button>按钮</button>

效果: 按钮悬停或获得焦点时，背景色为黄色。
兼容性: 除了IE浏览器，大多数现代浏览器支持。
is

`:where(selector1, selector2)`

描述: 类似 :is()，但不增加特异性。

示例:

css

:where(h1, h2, h3) {
  font-weight: bold;
}

html

<h1>标题1</h1><h2>标题2</h2>

效果: h1、h2、h3 字重加粗。
兼容性: 除了IE浏览器，大多数现代浏览器支持。
where

`:has(selector)`

描述: 包含指定选择器子元素的元素。

示例:

css

div:has(p) {
  border: 1px solid black;
}

html

<div><p>内容</p></div>

效果: 包含 <p> 的 <div> 添加边框。
兼容性: 2022年后大部分现代浏览器支持，支持有限，Chrome 105+版本以上支持。
has

==其他伪类==

`:root`

描述: 文档的根元素（通常为 <html>）。

示例:

css

:root {
  --main-color: #3498db;
}

html

<html><body>内容</body></html>

效果: 定义全局 CSS 变量。
兼容性: 所有现代浏览器支持。
root

`:lang(language)`

描述: 根据 lang 属性选择元素。

示例:

css

p:lang(en) {
  color: blue;
}

html

<p lang="en">English</p>

效果: lang="en" 的段落颜色为蓝色。
兼容性: 所有现代浏览器支持。
lang

`:target`

描述: URL 片段标识的目标元素。

示例:

css

:target {
  background: yellow;
}

html

<div id="section1">目标</div>

效果: 当 URL 为 #section1 时，背景色为黄色。
兼容性: 所有现代浏览器支持。
target

`:target-within`

描述: 目标元素或包含目标元素的元素。

示例:

css

div:target-within {
  border: 1px solid blue;
}

html

<div><p id="section1">目标</p></div>

效果: 包含目标元素的 <div> 添加蓝色边框。
兼容性: 这是一项实验性技术 #target-within-pseudo，大部分浏览器不支持。

`:scope`

描述: 作用域根元素。

示例:

css

:scope {
  background: lightgrey;
}

html

<div><p>内容</p></div>

效果: 作用域根元素背景色为浅灰色。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
scope

`:current`

描述: 时间维度画布中当前显示的元素。

示例:

css

p:current {
  color: red;
}

html

<p>当前</p>

效果: 当前显示的元素颜色为红色。
兼容性: 这是一项实验性技术 #the-current-pseudo，大部分浏览器不支持。

`:past`

描述: 时间维度画布中过去的元素。
示例:
css
```
p:past {
  opacity: 0.5;
}
```
1
2
3
html
```
<p>过去</p>
```
1
效果: 过去的元素透明度为 0.5。
兼容性: 支持有限。IE浏览器以及火狐浏览器所有版本均不支持，Edge浏览器仅在2020年后的版本支持。
past

`:future`

描述: 时间维度画布中未来的元素。

示例:

css

p:future {
  opacity: 0.5;
}

html

<p>未来</p>

效果: 未来的元素透明度为 0.5。
兼容性: 支持有限。IE浏览器以及火狐浏览器所有版本均不支持，Edge浏览器仅在2020年后的版本支持。
future

`:dir(ltr)`

描述: 左到右方向的元素。

示例:

css

p:dir(ltr) {
  text-align: left;
}

html

<p dir="ltr">文本</p>

效果: 左到右方向的元素左对齐。
兼容性: 支持有限。 2023年后的大部分现代浏览器支持。火狐浏览器可支持2012年后的版本，需添加-moz-前缀。
dir

`:modal`

描述: 模态对话框元素。

示例:

css

dialog:modal {
  background: white;
}

html

<dialog>对话框</dialog>

效果: 模态对话框背景色为白色。
兼容性: 支持有限，仅2022年后大部分浏览器支持。Chrome 105+以上版本支持。
modal

`:fullscreen`

描述: 全屏模式的元素。

示例:

css

video:fullscreen {
  border: none;
}

html

<video></video>

效果: 全屏模式的视频移除边框。
兼容性: 支持有限，早期版本需添加-webkit- 以及-moz-前缀。
fullscreen

`:picture-in-picture`

描述: 画中画模式的元素。

示例:

css

video:picture-in-picture {
  border: 1px solid black;
}

html

<video></video>

效果: 画中画模式的视频添加黑色边框。
兼容性: 支持有限，仅2023年后大部分现代浏览器支持，Chrome 110+以上版本支持，火狐浏览器以及IE浏览器所有版本均不支持。
picture-in-picture

`:popover-open`

描述: 当前显示的弹出窗口元素。

示例:

css

:popover-open {
  display: block;
}

html

<div popover>弹出</div>

效果: 打开的弹出窗口显示为块级元素。
兼容性: 支持有限，仅2023年后大部分现代浏览器支持，Chrome 114+以上版本支持。
popover-open

`:host`

描述: 匹配 Shadow DOM 中所有 shadow root 的根元素，可加括号后接选择器，匹配符合条件的根元素。

示例:

css

:host(.active) {
  background: blue;
}

html

<my-element class="active"><div>内容</div></my-element>

效果: 具有 active 类的 shadow root 根元素背景色为蓝色。
兼容性: 除了IE浏览器，大多数现代浏览器支持。(2020年以前的Edge浏览器不支持)
host

`:host-context(selector)`

描述: 匹配 Shadow DOM 中符合指定选择器条件的元素。

示例:

css

:host-context(.dark-theme) {
  color: white;
}

html

<div class="dark-theme"><my-element>内容</my-element></div>

效果: 当父元素具有 dark-theme 类时，Shadow DOM 根元素文本颜色为白色。
兼容性: 支持有限，苹果浏览器、火狐浏览器以及IE浏览器所有版本均不支持，Edge浏览器仅支持2020年后的版本
host-context

`:left`

描述: 与 @page 规则一起使用，选择打印文档的所有左侧页面。

示例:

css

@page :left {
  margin-left: 4cm;
}

html

<p>打印内容</p>

效果: 打印文档的左侧页面左边距为 4cm。
兼容性: 大部分现代浏览器支持，火狐浏览器所有版本均不支持。
left

`:right`

描述: 与 @page 规则一起使用，选择打印文档的所有右侧页面。

示例:

css

@page :right {
  margin-right: 4cm;
}

html

<p>打印内容</p>

效果: 打印文档的右侧页面右边距为 4cm。
兼容性: 大部分现代浏览器支持，火狐浏览器所有版本均不支持。
right

`:state()`

描述: 选择具有指定自定义状态的自定义元素。

示例:

css

my-element:state(highlighted) {
  border: 2px solid yellow;
}

html

<my-element>内容</my-element>

效果: 具有 highlighted 自定义状态的元素添加黄色边框。
兼容性: 支持有限，需检查自定义元素支持情况，仅2024年后的部分现代浏览器支持。
state

`:open`

描述: 匹配处于打开状态的元素（如 <details> 或 <dialog>）。

示例:

css

details:open {
  background: lightblue;
}

html

<details open>
  <summary>摘要</summary>
  内容
</details>

效果: 打开状态的 <details> 元素背景色为浅蓝色。
兼容性: 支持有限，部分浏览器仅2025年后的版本支持，Chrome 133+以上版本支持，safari浏览器以及Opera浏览器所有版本均不支持。
open

`:closed`

描述: 匹配处于关闭状态的元素（如 <details> 或 <dialog>）。

示例:

css

details:closed {
  background: lightgrey;
}

html

<details>
  <summary>摘要</summary>
  内容
</details>

效果: 关闭状态的 <details> 元素背景色为浅灰色。
兼容性: 截止本文发布(2025/06)，所有浏览器均不支持。
closed

`:muted`

描述: 匹配音频或视频元素处于静音状态。

示例:

css

video:muted {
  border: 1px solid grey;
}

html

<video muted></video>

效果: 静音的视频元素添加灰色边框。
兼容性: 支持有限，仅有Safari 15.4+以上版本浏览器支持。
muted

`:paused`

描述: 匹配暂停状态的音频或视频元素。

示例:

css

video:paused {
  opacity: 0.7;
}

html

<video></video>

效果: 暂停的视频元素透明度为 0.7。
兼容性: 支持有限，仅有Safari 15.4+以上版本浏览器支持。
paused

`:playing`

描述: 匹配播放状态的音频或视频元素。

示例:

css

video:playing {
  border: 2px solid green;
}

html

<video autoplay></video>

效果: 播放中的视频元素添加绿色边框。
兼容性: 支持有限，仅有Safari 15.4+以上版本浏览器支持。
playing

`:seeking`

描述: 匹配音频或视频元素正在寻找（跳转）到新位置的状态。

示例:

css

video:seeking {
  border: 2px dashed blue;
}

html

<video></video>

效果: 正在跳转的视频元素添加蓝色虚线边框。
兼容性: 支持有限，仅有Safari 15.4+以上版本浏览器支持。
seeking

`:buffering`

描述: 匹配音频或视频元素正在缓冲的状态。

示例:

css

video:buffering {
  background: lightyellow;
}

html

<video></video>

效果: 缓冲中的视频元素背景色为浅黄色。
兼容性: 支持有限，仅有Safari 15.4+以上版本浏览器支持。
buffering

`:stalled`

描述: 匹配音频或视频元素因数据不足而暂停加载的状态。

示例:

css

video:stalled {
  border: 1px solid red;
}

html

<video></video>

效果: 因数据不足暂停的视频元素添加红色边框。
兼容性: 支持有限，仅有Safari 15.4+以上版本浏览器支持。
stalled

`:xr-overlay`

描述: 匹配 XR（扩展现实）会话中的叠加层元素。

示例:

css

div:xr-overlay {
  background: rgba(0,0,0,0.5);
}

html

<div>XR 内容</div>

效果: XR 叠加层元素背景为半透明黑色。
兼容性: 支持有限，大部分浏览器仅2020年后的版本支持，Chrome 83+以上版本支持，Safari浏览器、火狐浏览器以及IE浏览器所有版本均不支持。
xr-overlay

==6. 伪元素选择器 (Pseudo-elements)==

`::before`

描述: 在元素内容前插入内容。

示例:

css

p::before {
  content: "★ ";
}

html

<p>文本</p>

效果: 段落前插入星号。
兼容性: 所有现代浏览器支持。
before

`::after`

描述: 在元素内容后插入内容。

示例:

css

p::after {
  content: " ★";
}

html

<p>文本</p>

效果: 段落后插入星号。
兼容性: 所有现代浏览器支持。
after

`::first-line`

描述: 选择元素的第一行。

示例:

css

p::first-line {
  color: blue;
}

html

<p>第一行<br>第二行</p>

效果: 段落第一行颜色为蓝色。
兼容性: 所有现代浏览器支持。
first-line

`::first-line (SVG \<text\> Support)`

描述: 选择 SVG <text> 元素的第一行文本。

示例:

css

text::first-line {
  fill: blue;
}

html

<svg>
  <text x="10" y="20">第一行文本<br>第二行文本</text>
</svg>

效果: SVG <text> 元素的第一行文本填充颜色为蓝色。
兼容性: 支持有限，仅Firefox 124+以上版本支持。

first-line (SVG text Support)

`::first-letter`

描述: 选择元素的第一个字母。

示例:

css

p::first-letter {
  color: red;
}

html

<p>文本</p>

效果: 段落第一个字母颜色为红色。
兼容性: 所有现代浏览器支持。
first-letter

`::first-letter (SVG \<text\> Support)`

描述: 选择 SVG <text> 元素的第一个字符。

示例:

css

text::first-letter {
  fill: red;
  font-size: 1.5em;
}

html

<svg>
  <text x="10" y="20">文本内容</text>
</svg>

效果: SVG <text> 元素的第一个字符填充颜色为红色，字体大小增大。
兼容性: 支持有限，仅Firefox 124+以上版本支持。

first-letter (SVG text Support)

`::selection`

描述: 用户选中的文本。

示例:

css

::selection {
  background: yellow;
  color: black;
}

html

<p>选中文本</p>

效果: 选中文本背景色为黄色，文字为黑色。
兼容性: 所有现代浏览器支持，Safari移动端所有版本均不支持
selection

`::placeholder`

描述: 输入框的占位符文本。

示例:

css

input::placeholder {
  color: #999;
  font-style: italic;
}

html

<input type="text" placeholder="输入内容">

效果: 输入框占位符文本为灰色斜体。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
placeholder

`::marker`

描述: 选择列表项的标记。

示例:

css

li::marker {
  color: red;
}

html

<ul><li>项目</li></ul>

效果: 列表项标记颜色为红色。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
marker

`::backdrop`

描述: 选择对话框或全屏元素的背景。

示例:

css

dialog::backdrop {
  background: rgba(0,0,0,0.5);
}

html

<dialog>对话框</dialog>

效果: 对话框背景半透明黑色。
兼容性: 所有现代浏览器支持。
backdrop

`::cue`

描述: 选择媒体元素的字幕。

示例:

css

video::cue {
  color: white;
}

html

<video><track kind="subtitles" src="sub.vtt"></video>

效果: 视频字幕颜色为白色。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
cue

`::part(name)`

描述: 匹配 shadow tree 中满足 part 条件的元素。

示例:

css

::part(my-part) {
  background: blue;
}

html

<my-element><div part="my-part">内容</div></my-element>

效果: 指定 part 的元素背景色为蓝色。
兼容性: 支持有限，大部分浏览器仅在2020年后的版本支持，Chrome 73+以上版本支持。
part

`::file-selector-button`

描述: 选择文件上传按钮。

示例:

css

input::file-selector-button {
  background: green;
}

html

<input type="file">

效果: 文件上传按钮背景色为绿色。
兼容性: 所有现代浏览器支持，2021年之前大部分浏览器需使用非标准名称::-webkit-file-upload-button，IE浏览器10以及11版本需使用非标准名称::-ms-browse。
file-selector-button

`::slotted(selector)`

描述: 匹配模板中的插槽元素。

示例:

css

::slotted(p) {
  color: red;
}

html

<my-element><p slot="content">内容</p></my-element>

效果: 插槽中的 <p> 元素颜色为红色。
兼容性: 除了IE浏览器，大部分现代浏览器支持。
slotted

`:has-slotted`

描述: 匹配 Shadow DOM 中包含指定插槽内容的宿主元素。

示例:

css

:has-slotted(p) {
  border: 1px solid blue;
}

html

<my-element><p slot="content">内容</p></my-element>

效果: 如果 <my-element> 的 Shadow DOM 中有 <p> 插槽内容，则添加蓝色边框。
兼容性: Chrome 134+，2025年新特性，截止本文发布(2025/06)，仅有Chrome浏览器、Edge浏览器以及火狐浏览器最新版本支持。
has-slotted

`::target-text`

描述: 匹配当前文本锚点所在的文本。

示例:

css

::target-text {
  background: yellow;
}

html

<p>文本内容</p>

效果: 文本锚点内容背景色为黄色。
兼容性: 大部分现代浏览器仅在2021年后版本支持，Chrome 89+以上版本支持。
target-text

`::column`

描述: 选择多列布局中的列元素。

示例:

css

div::column {
  border: 1px solid black;
}

html

<div style="columns: 2;">多列内容</div>

效果: 多列布局中的列添加黑色边框。
兼容性: Chrome 134+，2025年新特性，截止本文发布(2025/06)，仅有Chrome浏览器以及Edge浏览器最新版本支持。
column

`::picker()`

描述: 选择表单控件的 picker 界面（如日期选择器）。

示例:

css

input::picker() {
  background: lightblue;
}

html

<input type="date">

效果: 日期选择器的 picker 界面背景色为浅蓝色。
兼容性: Chrome 134+，2025年新特性，截止本文发布(2025/06)，仅有Chrome浏览器以及Edge浏览器最新版本支持。
picker

`::checkmark`

描述: 选择复选框或单选框的勾选标记。

示例:

css

input[type="checkbox"]::checkmark {
  color: green;
}

html

<input type="checkbox" checked>

效果: 复选框的勾选标记颜色为绿色。
兼容性: Chrome 133+，2025年新特性，截止本文发布(2025/06)，仅有Chrome浏览器以及Edge浏览器最新版本支持。
checkmark

==7. 选择器优先级==

选择器的优先级决定了当多个样式规则冲突时，哪个规则生效。以下是优先级计算规则：

选择器类型	权重值	示例
行内样式	1000	`style="..."`
ID 选择器	100	`#header`
类/属性/伪类	10	`.btn`, `[type="text"]`, `:hover`
元素/伪元素	1	`p`, `::before`
通用选择器	0	`*`

注意: !important 优先级最高，但应避免使用，因其破坏样式可维护性。
示例: #main .highlight p 的优先级为 100 + 10 + 1 = 111。

CSS 史上最全面的选择器大全以及兼容性整理（共计 118 个） ​

==1. 基本选择器== ​

类型选择器 (Type Selector) ​

通用选择器 (Universal Selector) ​

类选择器 (Class Selector) ​

ID 选择器 (ID Selector) ​

交集选择器 (Compound Selector) ​

并集选择器 (Multiple Selector) ​

==2. 组合器 (Combinators)== ​

后代选择器 (Descendant Combinator) ​

子选择器 (Child Combinator) ​

相邻同胞选择器 (Adjacent Sibling Combinator) ​

一般同胞选择器 (General Sibling Combinator) ​

列组合器 (Column Combinator) ​

命名空间分隔符 (Namespace Separator) ​

==3. 嵌套选择器 (Nesting Selector)== ​

& ​

==4. 属性选择器 (Attribute Selectors)== ​

[attr] ​

[attr=value] ​

[attr~=value] ​

[attr|=value] ​

[attr^=value] ​

[attr$=value] ​

[attr*=value] ​

[attr=value i] ​

[attr=value s] ​

==5. 伪类选择器 (Pseudo-classes)== ​

==交互伪类== ​

:hover ​

:active ​

:focus ​

:focus-within ​

:focus-visible ​

:link ​

:visited ​

:any-link ​

==结构伪类== ​

:first-child ​

:last-child ​

:nth-child(n) ​

:nth-last-child(n) ​

:first-of-type ​

:last-of-type ​

:nth-of-type(n) ​

:nth-last-of-type(n) ​

:only-child ​

:only-of-type ​

:empty ​

==状态伪类== ​

:checked ​

:disabled ​

:enabled ​

:default ​

:indeterminate ​

:valid ​

:invalid ​

:in-range ​

:out-of-range ​

:required ​

:optional ​

:read-only ​

:read-write ​

:placeholder-shown ​

:autofill ​

:user-valid ​

:user-invalid ​

:blank ​

==逻辑伪类== ​

:not(selector) ​

:not(a, .b, [c]) ​

:is(selector1, selector2) ​

:where(selector1, selector2) ​

:has(selector) ​

==其他伪类== ​

:root ​

:lang(language) ​

:target ​

:target-within ​

:scope ​

CSS 史上最全面的选择器大全以及兼容性整理（共计 118 个）

==1. 基本选择器==

`类型选择器 (Type Selector)`

`通用选择器 (Universal Selector)`

`类选择器 (Class Selector)`

`ID 选择器 (ID Selector)`

`交集选择器 (Compound Selector)`

`并集选择器 (Multiple Selector)`

==2. 组合器 (Combinators)==

`后代选择器 (Descendant Combinator)`

`子选择器 (Child Combinator)`

`相邻同胞选择器 (Adjacent Sibling Combinator)`

`一般同胞选择器 (General Sibling Combinator)`

`列组合器 (Column Combinator)`

`命名空间分隔符 (Namespace Separator)`

==3. 嵌套选择器 (Nesting Selector)==

`&`

==4. 属性选择器 (Attribute Selectors)==

`[attr]`

`[attr=value]`

`[attr~=value]`

`[attr|=value]`

`[attr^=value]`

`[attr$=value]`

`[attr*=value]`

`[attr=value i]`

`[attr=value s]`

==5. 伪类选择器 (Pseudo-classes)==

==交互伪类==

`:hover`

`:active`

`:focus`

`:focus-within`

`:focus-visible`

`:link`

`:visited`

`:any-link`

==结构伪类==

`:first-child`

`:last-child`

`:nth-child(n)`

`:nth-last-child(n)`

`:first-of-type`

`:last-of-type`

`:nth-of-type(n)`

`:nth-last-of-type(n)`

`:only-child`

`:only-of-type`

`:empty`

==状态伪类==

`:checked`

`:disabled`

`:enabled`

`:default`

`:indeterminate`

`:valid`

`:invalid`

`:in-range`

`:out-of-range`

`:required`

`:optional`

`:read-only`

`:read-write`

`:placeholder-shown`

`:autofill`

`:user-valid`

`:user-invalid`

`:blank`

==逻辑伪类==

`:not(selector)`

`:not(a, .b, [c])`

`:is(selector1, selector2)`

`:where(selector1, selector2)`

`:has(selector)`

==其他伪类==

`:root`

`:lang(language)`

`:target`

`:target-within`

`:scope`