选择器是 CSS 的地基：写样式之前，先要准确地"选中"元素。这篇文章梳理最常用的几类选择器，配合示例说明各自的适用场景。

基础选择器

/* 元素选择器：选中所有同类标签 */
p {
  color: #333;
}

/* 类选择器：最常用，一个页面可重复使用 */
.card {
  border-radius: 8px;
}

/* ID 选择器：页面中唯一，权重高 */
#header {
  background: #1f2937;
}

/* 通配选择器：选中所有元素 */
* {
  box-sizing: border-box;
}

日常开发优先用类选择器，语义清晰、可复用，也方便后期维护。

组合选择器

/* 后代选择器：选中 .nav 里所有 a（不管嵌套多深） */
.nav a {
  text-decoration: none;
}

/* 子选择器：只选 .nav 的直接子元素 a */
.nav > a {
  padding: 0 12px;
}

/* 相邻兄弟：选中紧跟在 h2 后面的 p */
h2 + p {
  margin-top: 0;
}

/* 通用兄弟：选中 h2 后面所有的 p */
h2 ~ p {
  color: #555;
}

属性选择器

/* 选中带 href 属性的 a */
a[href] {
  color: #2563eb;
}

/* 精确匹配 */
input[type="password"] {
  border-color: #d1d5db;
}

/* href 以 https 开头的链接 */
a[href^="https"] {
  color: #059669;
}

/* href 以 .pdf 结尾的链接，尾部追加提示 */
a[href$=".pdf"]::after {
  content: " (PDF)";
}

伪类：根据状态选择

/* 鼠标悬停 */
.btn:hover {
  background: #374151;
}

/* 获取焦点的输入框 */
input:focus {
  border-color: #3b82f6;
}

/* 第一个子元素 */
li:first-child {
  font-weight: bold;
}

/* 偶数行：表格斑马纹 */
tr:nth-child(even) {
  background: #f9fafb;
}

:hover 和 :focus 是交互反馈的基础；:nth-child() 在做列表和表格样式时特别好用。

伪元素：选中"部分内容"

/* 在元素前后插入内容 */
.quote::before {
  content: "\201C";
}
.quote::after {
  content: "\201D";
}

/* 占位符样式 */
input::placeholder {
  color: #9ca3af;
}

/* 首字放大 */
p::first-letter {
  font-size: 2em;
}

选择器权重速记

当多条规则同时命中一个元素时，浏览器按权重决定谁生效：

  • 行内样式：1000
  • ID 选择器：100
  • 类 / 属性 / 伪类：10
  • 元素 / 伪元素：1

权重相同时，写在后面的规则生效。实在需要提权可以用 !important，但尽量少用，避免样式难以维护。

小结

  • 日常首选类选择器，ID 选择器少用
  • > 只选直接子元素，空格选所有后代，注意区分
  • :nth-child()、:hover、:focus 覆盖大多数交互场景
  • 权重口诀：行内 > ID > 类 > 元素

选择器用得准，CSS 就成功了一半。下一篇我们进入布局，从最常用的 Flexbox 讲起。