CSS选择器使用详解

CSS选择器是CSS的核心组成部分，用于精准定位HTML元素并应用样式。以下是系统化的分类讲解：

---

一、基础选择器

1. 元素选择器
   直接使用HTML标签名：

   css

   复制

   下载

   p { color: blue; } /* 所有<p>元素 */

2. 类选择器（Class）
   使用.前缀：

   css

   复制

   下载

   .warning { border: 1px solid red; } /* class="warning"的元素 */

3. ID选择器
   使用#前缀（文档中唯一）：

   css

   复制

   下载

   #header { height: 60px; } /* id="header"的元素 */

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

   css

   复制

   下载

   * { margin: 0; } /* 重置所有元素的外边距 */

---

二、属性选择器

通过元素属性定位：

css

复制

下载

/* 存在属性 */
a[target] { color: purple; } /* 所有带target属性的<a> */

/* 精确匹配 */
input[type="text"] { background: #eee; }

/* 子字符串匹配 */
a[href^="https"]::after { content: "🔒"; } /* 以https开头 */
img[src$=".png"] { border: 1px solid; }    /* 以.png结尾 */
div[class*="box"] { padding: 10px; }       /* 包含"box" */

---

三、组合选择器

1. 后代选择器（空格）

   css

   复制

   下载

   nav ul li { list-style: none; } /* nav内的ul内的所有li */

2. 子元素选择器（>）

   css

   复制

   下载

   .menu > li { padding: 8px; } /* 仅直接子元素li */

3. 相邻兄弟选择器（+）

   css

   复制

   下载

   h2 + p { margin-top: 5px; } /* 紧接在h2后的第一个p */

4. 通用兄弟选择器（~）

   css

   复制

   下载

   h1 ~ p { color: gray; } /* h1之后的所有同级p */

---

四、伪类选择器

基于元素状态选择：

css

复制

下载

/* 交互状态 */
a:hover { text-decoration: underline; }
input:focus { border-color: blue; }
button:active { transform: scale(0.98); }

/* 结构位置 */
li:first-child { font-weight: bold; }   /* 第一个子元素 */
li:nth-child(2n) { background: #f5f5f5; } /* 偶数行 */
tr:nth-of-type(3) { color: green; }     /* 同类型第3个 */

/* 表单状态 */
input:disabled { opacity: 0.5; }
input:checked + label { color: red; }

---

五、伪元素选择器

创建虚拟元素并设置样式：

css

复制

下载

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

li::marker { color: red; }            /* 列表标记 */

/* 内容生成 */
.tooltip::after {
  content: "提示信息";
  position: absolute;
}

/* 选中文本样式 */
::selection {
  background: yellow;
  color: black;
}

---

六、选择器优先级计算

优先级权重（从高到低）：

1. !important（破坏性高，慎用）

2. 内联样式（权重1000）

3. ID选择器（权重100）

4. 类/属性/伪类（权重10）

5. 元素/伪元素（权重1）

6. 通配符（权重0）

示例：

css

复制

下载

#nav .item:hover {} /* 100(ID) + 10(类) + 10(伪类) = 120 */
div ul > li a {}    /* 1×4 = 4 */

---

七、最佳实践建议

1. 避免过度嵌套

   css

   复制

   下载

   /* 不佳写法 */
   body div#container ul li a {}
   
   /* 推荐写法 */
   .nav-link {}

2. 善用属性选择器简化代码

   css

   复制

   下载

   [class^="btn-"] { /* 匹配btn-开头的类 */ }

3. 伪元素内容生成技巧

   css

   复制

   下载

   .external-link::after {
     content: " ↗";
     display: inline-block;
   }

4. 状态伪类组合使用

   css

   复制

   下载

   button:not(:disabled):hover { /* 未禁用的按钮悬停状态 */ }

---

选择器速查表

类型	示例	说明
群组选择器	h1, h2, h3	同时选择多个元素
通用兄弟选择器	p ~ span	p之后的所有同级span
否定伪类	:not(.hidden)	排除.hidden类的元素
空元素伪类	div:empty	选择没有子元素的div
目标伪类	:target	URL片段标识符指向的元素
范围伪类	:in-range	输入值在min/max范围内的元素

掌握选择器是高效编写CSS的关键，合理组合使用可大幅提升代码质量与维护性！