在线工具
  1. 首页
  2. 常用对照表
  3. CSS 选择器参考表

CSS 选择器参考表

分类：常用对照表
CSS 选择器定义了在 Web 页面中选取特定元素的模式，通常可分为元素选择器、类选择器、ID 选择器、属性选择器等几大类。本页列出了最新 CSS 规范支持的选择器及其用法，是前端开发者必备的参考资料之一（建议收藏）。
相关工具：常用 Linux 命令商标分类表全国车牌号码简称常用颜色参考表中文字体中英名称对照VS Code 常用快捷键HTTP状态码对照表键盘键码值 KeyCode 参考

CSS 选择器 CSS Selectors

说明：CSS 选择器，定义了在 Web 页面中选取特定元素的模式，通常可分为类选择器、ID 选择器、元素选择器、属性选择器、伪类选择器、伪元素选择器等几大类。熟练并灵活使用 CSS 选择器，可大大提高我们书写页面样式的能力。

选择器示例示例说明CSS 规范
**选择页面中所有元素（可以把 * 理解为是一个通配符）CSS 2
:root:root选择文档的根元素。通常用于在 :root 中设置 CSS 变量CSS 3
:lang(language)html:lang(fr)选择 lang="fr" 的 <html> 元素。通常使用该选择器来对不同语言的页面进行样式定制化CSS 2
#id#chartID 选择器，选择页面中 id="chart" 的元素CSS 1
.class.card类选择器，选择页面中 class="card" 的所有元素CSS 1
.class1.class2.btn.btn-danger选择同时具有 btn 和 btn-danger 类名的所有元素CSS 1
.class1 .class2.card .card-body在 class 属性等于 card 元素后代中，选择具有 card-body 类名的元素CSS 1
elementul元素选择器，选择页面中所有 <ul> 元素CSS 1
element.classinput.form-control选择页面中 class="form-control" 的所有 <input> 元素CSS 1
element1, element2a, button选择页面中所有 <a> 和所有 <button> 元素CSS 1
element1 element2div table选择 <div> 元素内的所有 <table> 元素CSS 1
element1 > element2ul > li选择 <ul> 元素的直接 <li> 子元素CSS 2
element1 + element2input + span选择紧跟 <input> 元素的首个 <span> 元素CSS 2
element1 ~ element2hr ~ div选择前面有 <hr> 元素的每个 <div> 元素CSS 3
[attribute][disabled]属性选择器，选择页面中所有带 disabled 属性的元素CSS 2
[attribute=value][target=_blank]选择带有 target="_blank" 属性的所有元素CSS 2
[attribute~=value][value~=tool]选择 value 属性中包含 tool 字样的所有元素CSS 2
[attribute|=value][lang|=zh]选择 lang 属性值等于 zh 或以 zh- 开头的所有元素CSS 2
[attribute^=value]a[href^=mailto]选择 href 属性值以 mailto 开头的每个 <a> 元素CSS 3
[attribute$=value]img[src$=".png"]选择 src 属性以 .png 结尾的所有 <img> 元素CSS 3
[attribute*=value]a[href*=rest]选择 href 属性值中包含 rest 字符串的每个 <a> 元素CSS 3
:activea:active选择页面中的活动链接CSS 1
:hovera:hover选择鼠标停留在其上的链接CSS 1
:visiteda:visited选择页面中已访问过的链接CSS 1
:linka:link选择页面中未访问过的链接CSS 1
::afterdiv::after伪元素选择器，表示在每个 <div> 内部的最后插入内容CSS 2
::beforediv::before伪元素选择器，表示在每个 <div> 内部的最开始插入内容CSS 2
:checkedinput:checked选择每个已选中的 <input> 元素，通常用于选择 type="checkbox" 的 <input> 元素CSS 3
:enabledbutton:enabled选择页面中每个已启用的 <button> 元素CSS 3
:disabledbutton:disabled选择页面中每个被禁用的 <button> 元素CSS 3
:defaultinput:default选择默认的 <input> 元素CSS 3
:emptydiv:empty选择没有子元素的每个 <div> 元素（包括文本节点）。CSS 3
:first-childp:first-child选择属于父元素的第一个子元素的每个 <p> 元素CSS 2
::first-letterp::first-letter伪元素选择器，选择每个 <p> 元素的首字母CSS 1
::first-linep::first-line伪元素选择器，选择每个 <p> 元素的首行（第一行）CSS 1
:first-of-typep:first-of-type选择每个 <p> 元素，且该元素是其父级的第一个 <p> 元素CSS 3
:focusinput:focus选择当前获得焦点的 <input> 元素CSS 2
:fullscreen:fullscreen选择当前处于全屏模式的元素实验性
::backdrop::backdrop伪元素选择器，选择在任何处于全屏模式的元素下的即刻渲染的盒子实验性
:in-rangeinput:in-range选择值处于指定范围之内的 <input> 元素CSS 3
:out-of-rangeinput:out-of-range选择值超出指定范围的 <input> 元素CSS 3
:indeterminateinput:indeterminate选择处于不确定状态的 <input> 元素。通常用于选择那些具有中间状态的 checkboxes、progress 和 radios 等元素CSS 3
:validinput:valid选择当前值为有效值的所有 <input> 元素CSS 3
:invalidinput:invalid选择当前值为无效值的所有 <input> 元素CSS 3
:last-childp:last-child选择属于父元素最后一个子元素的每个 <p> 元素CSS 3
:last-of-typep:last-of-type选择每个 <p> 元素，且该元素是其父级的最后一个 <p> 元素CSS 3
:not(selector):not(button:disabled)否定选择器，选择所有未被禁用的按钮CSS 3
:nth-child(n)li:nth-child(4)选择属于其父元素的第四个子元素的每个 <li> 元素CSS 3
:nth-last-child(n)li:nth-last-child(2)选择属于其父元素的倒数第二个子元素的每个 <li> 元素CSS 3
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素CSS 3
:nth-last-of-type(n)p:nth-last-of-type(2)选择属于其父元素倒数第二个 <p> 元素的每个 <p> 元素CSS 3
:only-of-typep:only-of-type选择 <p> 元素，且该 <p> 元素没有其他相同类型的兄弟元素CSS 3
:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素CSS 3
:requiredinput:required选择带有 required 属性的 <input> 元素CSS 3
:optionalinput:optional选择不带 required 属性的 <input> 元素CSS 3
::placeholderinput::placeholder伪元素选择器，用于设置 <input> 元素的 placeholder 占位符 样式实验性
:read-onlyinput:read-only选择带有 readonly 属性的 <input> 元素CSS 3
:read-writeinput:read-write选择不带 readonly 属性的 <input> 元素CSS 3
::selection::selection伪元素选择器，可设置已选取内容的样式CSS 3
:target#profile:target选择当前活动的 #profile 元素CSS 3

相关 CSS 工具推荐：

工具介绍

工具简介

CSS（层叠样式表）选择器是前端开发中的基础与核心，它定义了如何选择HTML文档中的元素并应用样式规则。随着Web标准的不断发展，CSS选择器从CSS2到CSS4经历了显著的功能增强与语法扩展。掌握各类选择器的特性和应用场景，对于构建现代化、可维护的Web界面至关重要。

下面将简要介绍一下常用的 CSS 选择器，以供开发时参考。

CSS2：基础选择器

CSS2 规范奠定了CSS选择器的基础，这些选择器至今仍是日常开发中最常用的工具。

2.1 基本选择器

元素选择器：通过HTML元素名称选择元素

p {
  color: #333;
  line-height: 1.5;
}

类选择器：通过class属性选择元素，使用点号(.)前缀

.button {
  padding: 8px 16px;
  border-radius: 4px;
}

ID选择器：通过id属性选择元素，使用井号(#)前缀

#header {
  height: 60px;
  background-color: #f8f9fa;
}

通配符选择器：匹配所有元素

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2.2 属性选择器

CSS2引入了基础的属性选择器，允许根据元素属性进行选择：

  • [attribute]：选择带有指定属性的元素
  • [attribute=value]：选择属性值完全等于value的元素
  • [attribute~=value]：选择属性值包含特定词汇value的元素
  • [attribute|=value]：选择属性值以value或value-开头的元素
input[type="text"] {
  border: 1px solid #ccc;
}

a[target="_blank"]::after {
  content: " ↗";
}

2.3 关系选择器

后代选择器：选择特定元素内部的所有指定后代元素

article p {
  margin-bottom: 1em;
}

子元素选择器：仅选择直接子元素

nav > ul {
  list-style: none;
}

相邻兄弟选择器：选择紧接在另一元素后的兄弟元素

h2 + p {
  margin-top: 0.5em;
}

CSS3：功能增强

CSS3极大地扩展了选择器的能力，引入了更多精确匹配和结构选择的方法。

3.1 属性选择器增强

CSS3新增了三种属性匹配模式：

  • [attribute^=value]：选择属性值以value开头的元素
  • [attribute$=value]：选择属性值以value结尾的元素
  • [attribute*=value]：选择属性值包含value子字符串的元素
a[href^="https"] {
  color: green;
}

img[src$=".jpg"] {
  border: 2px solid #ddd;
}

div[class*="container"] {
  max-width: 1200px;
  margin: 0 auto;
}

3.2 结构伪类选择器

结构伪类根据元素在文档树中的位置进行选择：

  • :first-child：选择作为其父元素第一个子元素的元素
  • :last-child：选择作为其父元素最后一个子元素的元素
  • :nth-child(n)：选择作为其父元素第n个子元素的元素
  • :nth-last-child(n)：从末尾开始计数选择子元素
  • :only-child：选择作为其父元素唯一子元素的元素
li:first-child {
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

div:only-child {
  width: 100%;
}

3.3 用户行为伪类

  • :hover：鼠标悬停时的状态
  • :active：元素被激活时的状态
  • :focus：元素获得焦点时的状态
  • :enabled/:disabled：启用或禁用状态的表单元素
  • :checked：被选中的单选或复选框
button:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
}

input:focus {
  outline: 2px solid #4d90fe;
  border-color: #4d90fe;
}

3.4 其他CSS3伪类

  • :not(selector)：否定伪类，选择不匹配指定选择器的元素
  • :empty：选择没有子元素的元素
  • :root：选择文档的根元素（HTML中通常是html元素）
div:not(.sidebar) {
  padding: 20px;
}

p:empty {
  display: none;
}

:root {
  --primary-color: #007bff;
}

CSS4：前沿扩展

CSS4选择器规范进一步扩展了选择能力，提供了更精细的控制方法。

4.1 逻辑组合伪类

:is() 伪类：接受选择器列表作为参数，匹配列表中任意选择器可选中的元素

:is(header, footer, section) a {
  color: #0366d6;
}

/* 等效于 */
header a, footer a, section a {
  color: #0366d6;
}

:where() 伪类：与:is()类似，但优先级始终为0

:where(article, aside) p {
  line-height: 1.6;
}

:has() 伪类：选择包含特定子元素的父元素（目前浏览器支持有限）

div:has(> img) {
  border: 1px solid #ccc;
}

4.2 增强的属性选择器

CSS4允许在属性选择器中使用大小写敏感修饰符：

/* 不区分大小写（CSS4新增） */
a[href*="example" i] {
  color: purple;
}

/* 区分大小写（默认行为） */
a[href*="Example"] {
  color: blue;
}

4.3 其他CSS4选择器

方向伪类：根据文本方向选择元素

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

p:dir(rtl) {
  text-align: right;
}

范围伪类：针对类似视频播放器进度条等UI组件

input[type="range"]:in-range {
  border-color: green;
}

input[type="range"]:out-of-range {
  border-color: red;
}

选择器优先级与最佳实践

5.1 优先级计算规则

CSS选择器优先级按照以下规则计算：

  1. 内联样式：1000
  2. ID选择器：100
  3. 类选择器、属性选择器、伪类：10
  4. 元素选择器、伪元素：1
  5. 通配符、关系选择器：0

当优先级相同时，后定义的样式会覆盖先定义的样式。

5.2 选择器性能优化

  • 避免使用过于复杂的选择器
  • 优先使用类选择器而非多层嵌套的关系选择器
  • 谨慎使用通配符选择器
  • 合理利用继承属性减少选择器使用

5.3 可维护性建议

  • 使用有意义的类名和ID
  • 保持选择器简洁明了
  • 采用一致的命名规范（如BEM、OOCSS）
  • 适当使用CSS预处理器（如Sass、Less）增强可读性

总结

从CSS2到CSS4，选择器的能力不断增强，为前端开发人员提供了更精确、更高效的元素选择方式。掌握这些选择器的特性和适用场景，能够显著提升样式代码的质量和开发效率。在实际项目中，应根据浏览器兼容性要求和具体需求，合理选择和使用各类选择器，构建可维护、高性能的Web界面。

希望本工具列出的常见 CSS 选择器对你的日常工作带来一定的帮助。

 

最后更新：