CSS 选择器完全指南 — 从基础到高级

系统学习CSS选择器：基础选择器、组合器、伪类、伪元素、属性选择器，精准定位任意页面元素 · 难度：入门 · +10XP

CSS 选择器完全指南

CSS选择器是前端开发最重要的基本功之一。它让你能够精准地选中页面上的任意元素并对其施加样式。如果把HTML比作房子的骨架，CSS选择器就是你指哪打哪的指挥棒——"把二楼卧室的墙刷成蓝色"、"把厨房的灯换成暖黄色"。

基础选择器

选择器	语法	说明	示例
通配符	*	选中所有元素	* { margin: 0; }
类型选择器	element	按标签名选中	p { color: red; }
类选择器	.class	按class属性选中（最常用）	.card { border: 1px solid; }
ID选择器	#id	按id属性选中（唯一）	#header { height: 60px; }

组合器 — 根据关系选择

/* 1. 后代选择器（空格）：选中所有后代元素 */
article p {
  line-height: 1.8;  /* article内的所有p元素 */
}
/* 2. 子选择器（>）：只选中直接子元素 */
nav > ul > li {
  display: inline-block;  /* 只选导航的第一层li */
}
/* 3. 相邻兄弟（+）：紧跟在后面的第一个兄弟 */
h2 + p {
  margin-top: 0;  /* h2后面紧跟的第一个p */
}
/* 4. 通用兄弟（~）：后面所有兄弟元素 */
h2 ~ p {
  color: #666;  /* h2后面所有的p元素 */
}

属性选择器 — 根据属性匹配

/* 拥有某属性 */
[title] { cursor: help; }

/* 属性等于某值 */
[type="email"] { border-color: blue; }
/* 属性值以某字符串开头 */
[href^="https"] { color: green; }  /* 安全链接 */
/* 属性值以某字符串结尾 */
[href$=".pdf"]::after {
  content: " (PDF)";  /* PDF链接添加标记 */
}
/* 属性值包含某字符串 */
[class*="btn"] { border-radius: 4px; }
/* 属性值包含完整单词 */
[class~="active"] { font-weight: bold; }

伪类选择器 — 根据状态选择

/* 链接状态 */
a:link { color: blue; }       /* 未访问 */
a:visited { color: purple; }   /* 已访问 */
a:hover { color: red; }        /* 鼠标悬停 */
a:active { color: orange; }    /* 点击瞬间 */

/* 表单状态 */
input:focus { outline: 2px solid blue; }     /* 获得焦点 */
input:disabled { background: #eee; }          /* 禁用状态 */
input:checked + label { color: green; }      /* 选中状态 */
input:invalid { border-color: red; }          /* 验证失败 */
/* 结构伪类 */
li:first-child { font-weight: bold; }   /* 第一个子元素 */
li:last-child { border-bottom: none; }   /* 最后一个子元素 */
li:nth-child(odd) { background: #f0f0f0; }  /* 奇数行斑马纹 */
li:nth-child(3) { color: gold; }       /* 第3个元素 */
li:nth-child(2n+1) { background: #f5f5f5; } /* 自定义公式 */

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

/* 在元素内容前/后插入内容 */
blockquote::before { content: "201C"; font-size: 3em; color: #ccc; }
blockquote::after { content: "201D"; }

/* 首行/首字母样式 */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; color: red; }
/* 选中文字样式 */
::selection { background: yellow; color: black; }
/* 输入框占位符 */
::placeholder { color: #999; font-style: italic; }

选择器优先级（权重计算）

选择器类型	权重值	示例
!important	最高	color: red !important;
内联样式	1000	<div style="...">
ID选择器	100	#header
类/属性/伪类	10	.card, [type], :hover
类型/伪元素	1	div, ::before
通配符	0	*

动手练习

1. 制作斑马纹表格：使用nth-child选择器为一个表格实现斑马纹效果（奇偶行不同背景色），并使用first-child/last-child给首行和末行特殊样式。
2. 链接状态设计：为导航栏中的链接设置完整的5种状态样式（link、visited、hover、active、focus），让每种状态有明显视觉区分。
3. 表单验证反馈：使用:valid/:invalid伪类和属性选择器，为表单输入框设置实时验证反馈样式——输入正确时显示绿色边框，错误时显示红色边框和错误图标。