CSS 选择器 — 精准定位元素

学习类选择器、ID选择器、后代选择器 · 难度：进阶 · +15XP

CSS 选择器

CSS 选择器（Selectors）是 CSS 规则的一部分，用来定位你想要设置样式的 HTML 元素。选择器是 CSS 的核心——只有选中了正确的元素，你才能给它设置颜色、大小、位置等样式。

/* CSS 规则的基本结构 */
选择器 {
  属性: 值;
  属性: 值;
}
/* 示例：选中所有  元素，设置字体大小为 16px，颜色为深灰 */
p {
  font-size: 16px;
  color: #333;
}

选择器分类总览

分类	选择器示例	权重（特异性）	说明
通用选择器	`*`	0,0,0,0	选中所有元素
类型（标签）选择器	`div`, `p`, `h1`	0,0,0,1	按标签名选中
类选择器	`.intro`, `.active`	0,0,1,0	按 class 属性选中
ID 选择器	`#header`, `#main`	0,1,0,0	按 id 属性选中
属性选择器	`[type="text"]`, `[href^="https"]`	0,0,1,0	按属性名/值选中
伪类选择器	`:hover`, `:first-child`, `:nth-child()`	0,0,1,0	按元素状态选中
伪元素选择器	`::before`, `::after`, `::first-line`	0,0,0,1	选中元素的某个部分
组合器	`div p`, `div > p`, `div + p`, `div ~ p`	—	按元素关系选中

一、基础选择器

/* 1. 通用选择器 —— 选中页面中所有元素 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 2. 类型选择器 —— 选中所有同类型标签 */
h1 { color: #2c3e50; font-size: 2em; }
p  { line-height: 1.8; color: #555; }
a  { text-decoration: none; color: #3498db; }
/* 3. 类选择器 —— 最常用！可复用 */
.btn {
  padding: 10px 20px;
  border-radius: 4px;
  display: inline-block;
}
.btn-primary { background: #3498db; color: white; }
.btn-danger  { background: #e74c3c; color: white; }
/* 4. ID 选择器 —— 唯一元素 */
#header  { height: 60px; background: #333; }
#sidebar { width: 250px; float: left; }
/* 多类选择器 —— 同时具有多个 class 才选中 */
.btn.active { background: #2ecc71; }  /* 同时有 btn 和 active 类 */

二、属性选择器

/* [attr]        —— 有该属性就选中 */
[disabled] { opacity: 0.5; cursor: not-allowed; }
/* [attr=val]    —— 属性值完全匹配 */
[type="email"] { border-color: #3498db; }
[type="submit"] { cursor: pointer; }
/* [attr^=val]   —— 属性值以 val 开头 */
[href^="https"] { color: green; }  /* 安全链接用绿色 */
[class^="col-"] { float: left; }   /* 栅格列 */
/* [attr$=val]   —— 属性值以 val 结尾 */
[href$=".pdf"]::after { content: " [PDF]"; font-size: 0.8em; }
[src$=".jpg"], [src$=".png"] { border: 1px solid #ddd; }
/* [attr*=val]   —— 属性值包含 val */
[class*="card"] { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
/* [attr~=val]   —— 属性值包含独立的 val（空格分隔） */
[class~="highlight"] { background: yellow; }

三、伪类选择器 —— 按状态选择

/* ---- 链接状态 ---- */
a:link    { color: blue; }      /* 未访问 */
a:visited { color: purple; }    /* 已访问 */
a:hover   { color: red; }       /* 鼠标悬停 */
a:active  { color: orange; }    /* 点击瞬间 */
/* 记忆口诀：LoVe HAte —— Link → Visited → Hover → Active */
/* ---- 表单状态 ---- */
input:focus     { outline: 2px solid #3498db; }  /* 获得焦点 */
input:disabled  { background: #eee; }             /* 禁用状态 */
input:checked   { accent-color: #2ecc71; }       /* 选中状态 */
input:invalid   { border-color: #e74c3c; }       /* 验证失败 */
input:required  { border-left: 3px solid #f39c12; }
/* ---- 子元素位置（非常强大） ---- */
li:first-child        { font-weight: bold; }     /* 第一个子元素 */
li:last-child         { border-bottom: none; }   /* 最后一个子元素 */
li:nth-child(2)       { color: red; }            /* 第 2 个 */
li:nth-child(odd)     { background: #f9f9f9; }   /* 奇数行（斑马纹） */
li:nth-child(even)    { background: #fff; }      /* 偶数行 */
li:nth-child(3n+1)    { clear: both; }           /* 每 3 个一组的第 1 个 */
/* ---- 其他常用伪类 ---- */
p:not(.intro)   { font-size: 14px; }  /* 排除某类 */
div:empty       { display: none; }    /* 空元素隐藏 */
:root           { --primary: #3498db; }  /* 根元素（定义 CSS 变量） */

四、伪元素选择器 —— 创建"虚拟"元素

/* ::before / ::after —— 在元素内容前后插入内容（必须有 content 属性） */
.tip::before {
  content: "???? ";
  font-size: 1.2em;
}
.external-link::after {
  content: " ↗";
  font-size: 0.7em;
  color: #999;
}
.clearfix::after {           /* 经典清除浮动技巧 */
  content: "";
  display: table;
  clear: both;
}
/* ::first-line —— 首行 */
p::first-line {
  font-weight: bold;
  color: #2c3e50;
}
/* ::first-letter —— 首字母（杂志风格） */
p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 0.8;
  color: #e74c3c;
}
/* ::selection —— 用户选中的文字 */
::selection {
  background: #3498db;
  color: white;
}
/* ::placeholder —— 输入框占位文字 */
input::placeholder {
  color: #ccc;
  font-style: italic;
}

五、组合器 —— 按元素关系选择

/* 后代选择器（空格）—— 选中所有后代，无论嵌套多深 */
article p { line-height: 1.8; }  /* article 内所有 p */
/* 子代选择器（>）—— 只选中直接子元素 */
ul > li { margin: 5px 0; }      /* 只选中 ul 的直接 li，不包含嵌套 ul 里的 li */
/* 相邻兄弟选择器（+）—— 紧挨着的下一个兄弟元素 */
h2 + p { font-style: italic; }  /* 紧跟在 h2 后面的第一个 p */
/* 通用兄弟选择器（~）—— 后面所有兄弟元素 */
h2 ~ p { color: #666; }        /* h2 后面的所有 p 兄弟元素 */
/* 选择器列表（,）—— 同时选中多个选择器 */
h1, h2, h3 { font-family: 'Microsoft YaHei', sans-serif; }

六、CSS 权重（特异性 Specificity）

当多个规则选中同一个元素时，权重决定哪个样式生效。计算方式：(a, b, c, d)

选择器	a（行内）	b（ID）	c（类/属性/伪类）	d（标签/伪元素）	权重值
`*`	0	0	0	0	0
`p`	0	0	0	1	1
`.card`	0	0	1	0	10
`#header`	0	1	0	0	100
`style="..."`	1	0	0	0	1000
`!important`	无视一切权重，最高优先级（慎用！）				∞
`div.card:hover`	0	0	2	1	21
`#nav li.active`	0	1	1	1	111

注意：权重是从左到右逐位比较的，跟十进制数字无关。100 个类选择器也赢不了 1 个 ID 选择器。

???? 练习任务

创建一个 HTML 表格（至少 5 行），用 nth-child 实现斑马纹效果
用属性选择器给所有外部链接（href 以 https 开头）添加特殊样式和外链图标
用 ::before 和 ::after 给引用块加装饰性引号
用子代选择器 > 和后代选择器（空格）分别设置导航菜单的样式，理解它们的区别
实现一套 :hover :focus :active 交互样式，覆盖链接、按钮和输入框
计算以下选择器的权重：#content .article p:first-child vs body .content article p.intro，谁赢？