首页 › CSS › CSS 基础 › 选择器全解

选择器决定"哪些元素被样式化"。掌握选择器是写出精确、可维护 CSS 的基础。

基本选择器

/* 元素选择器 */
div { }      /* 所有 <div> */
p { }        /* 所有 <p> */
h1 { }       /* 所有 <h1> */

/* 类选择器 */
.card { }    /* class="card" 的元素 */
.active { }  /* class="active" 的元素 */

/* ID 选择器 */
#header { }  /* id="header" 的元素（只能用一个） */

/* 通配符选择器 */
* { }        /* 所有元素（性能消耗大，慎用） */

组合选择器

/* 后代选择器（空格） */
div p { }           /* <div> 内的所有 <p>，不限层级 */

/* 子代选择器（>） */
div > p { }         /* 仅 <div> 的直接子元素 <p> */

/* 相邻兄弟选择器（+） */
h2 + p { }          /* <h2> 后紧邻的第一个 <p> */

/* 通用兄弟选择器（~） */
h2 ~ p { }          /* <h2> 后的所有兄弟 <p> */

<div>
  <p>子代 p（div > p 匹配）</p>
  <section>
    <p>后代 p（div p 匹配，div > p 不匹配）</p>
  </section>
</div>
<h2>标题</h2>
<p>相邻兄弟（h2 + p 匹配）</p>
<p>通用兄弟（h2 ~ p 匹配）</p>

属性选择器

/* 有特定属性 */
[disabled] { }            /* 所有带 disabled 属性的元素 */

/* 属性等于特定值 */
[type="text"] { }         /* type="text" */
[href="https://..."] { } /* 精确 href */

/* 属性包含特定值 */
[class*="btn"] { }        /* class 包含 "btn" */
[href*="example.com"] { } /* href 包含 "example.com" */

/* 属性以特定值开头 */
[href^="https"] { }       /* HTTPS 链接 */
[class^="icon-"] { }      /* class 以 "icon-" 开头 */

/* 属性以特定值结尾 */
[src$=".png"] { }         /* PNG 图片 */
[href$=".pdf"] { }        /* PDF 链接 */

/* 属性值以空格分隔的列表中的某个值 */
[class~="active"] { }     /* class 列表中包含 "active" */

/* 属性值以连字符开头 */
[lang|="zh"] { }          /* lang="zh-CN" 或 lang="zh" */

伪类（单一冒号 :）

描述元素的状态：

/* 链接/按钮状态 */
a:link { }          /* 未访问 */
a:visited { }       /* 已访问 */
a:hover { }         /* 鼠标悬停 */
a:active { }        /* 激活（按下瞬间） */

/* 输入状态 */
input:focus { }     /* 聚焦 */
input:checked { }   /* 选中（checkbox/radio） */
input:disabled { }  /* 禁用 */
input:required { }  /* 必填 */
input:valid { }     /* 验证通过 */
input:invalid { }   /* 验证失败 */

/* 位置相关 */
:first-child { }    /* 第一个子元素 */
:last-child { }     /* 最后一个子元素 */
:nth-child(n) { }   /* 第 n 个子元素 */
:nth-last-child(n) { } /* 倒数第 n 个 */
:first-of-type { }  /* 同类元素中的第一个 */
:last-of-type { }   /* 同类元素中的最后一个 */
:nth-of-type(n) { } /* 同类元素中的第 n 个 */

/* 其他 */
:not(selector) { }  /* 排除 */
:empty { }          /* 无子元素的元素 */
:target { }         /* URL 锚点匹配的元素 */

:nth-child 常见用法

/* 偶数/奇数 */
li:nth-child(even) { }  /* 第 2, 4, 6... */
li:nth-child(odd) { }   /* 第 1, 3, 5... */

/* 每 3 个一组 */
li:nth-child(3n) { }    /* 第 3, 6, 9... */
li:nth-child(3n+1) { }  /* 第 1, 4, 7... */

/* 前 3 个 */
li:nth-child(-n+3) { }  /* 第 1, 2, 3 */

/* 从第 4 个开始 */
li:nth-child(n+4) { }   /* 第 4, 5, 6... */

伪元素（双冒号 ::）

创建不存在于 DOM 中的元素：

/* 元素内容前/后插入 */
.element::before {
  content: "→ ";
  /* 必须设置 content 属性 */
}
.element::after {
  content: "";
  display: block;
  clear: both;
}

/* 文本选择 */
::selection {
  background: #1890ff;
  color: white;
}

/* 首字母/首行 */
p::first-letter { font-size: 2em; }
p::first-line { font-weight: bold; }

/* 占位符 */
input::placeholder { color: #999; }

选择器特异性（Specificity）

当多个选择器匹配同一元素时，特异性决定哪个生效：

计算规则

特异性用 (a, b, c, d) 表示：

选择器	特异性	含义
*	(0,0,0,0)	通配符
h1	(0,0,0,1)	一个元素
.class	(0,0,1,0)	一个类
#id	(0,1,0,0)	一个 ID
style=""	(1,0,0,0)	内联
!important	↑ 最高	覆盖一切

/* 特异性 */
#nav .list li a.active { }  /* (0,1,2,2) → 1 ID + 2 类 + 2 元素 */
body a { }                  /* (0,0,0,2) */

不要用 !important，它会破坏层叠规则。调整选择器特异性是更好的方式。

小结

选择器类型	示例	特异性
元素	div	(0,0,0,1)
类	.class	(0,0,1,0)
ID	#id	(0,1,0,0)
属性	[type="text"]	(0,0,1,0)
伪类	:hover	(0,0,1,0)
伪元素	::before	(0,0,0,1)
内联	style=""	(1,0,0,0)

上一节：CSS 概述与引入方式 下一节：层叠、继承与盒模型

贡献者: 布欧-Lewyon