[特殊字符]《超全CSS选择器终极指南：从基础到高阶，助你布局效率翻倍！》

🚀《超全CSS选择器终极指南：从基础到高阶，助你布局效率翻倍！》

🔍 CSS选择器全景解析

‌CSS选择器是控制页面样式的核心工具‌，下表为CSS与CSS3选择器关键对比：

选择器类型	支持版本	核心功能	典型应用场景
基础选择器	CSS1	简单元素定位	全局样式定义
属性选择器	CSS2/3	按属性特征匹配元素	表单元素过滤
伪类选择器	CSS2/3	匹配特定状态/位置元素	交互效果实现
组合选择器	CSS3	元素层级关系控制	复杂结构样式控制
结构伪类	CSS3	动态匹配序列元素	表格/列表样式优化

‌层级进化路线图‌
基础选择器 → 组合选择器 → 属性选择器 → 伪类选择器 → 伪元素

🎯 基础选择器（CSS1）

1. 标签选择器

div { 
  color: blue;
}
/* 选中所有<div>元素 */
* {
  margin: 0;
  padding: 0;
}
/* `*`通配所有标签，选中所有标签元素 */

2. 类选择器

.btn-primary {
  background: #007bff;
}
/* 选中class包含"btn-primary"的元素 */

3. ID选择器

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

🚀 CSS3新增选择器实战（重点！）

1. 属性选择器（Attribute Selectors）

选择器	匹配规则	示例代码	解释
[attr]	存在指定属性	`[data-modal]`	匹配自定义弹窗元素
[attr=val]	精确匹配属性值	`input[type="search"]`	搜索输入框样式定制
[attr^=val]	类名以特定字符串开头	`[class^="icon-"]`	图标字体统一管理
[attr$=val]	属性值以特定字符串结尾	`a[href$=".pdf"]::after`	PDF文件图标标注
[attr*=val]	属性值包含指定字符串	`[title*="重要"]`	关键内容高亮
[attr\|=“val”]	属性值指定字符串开头	`[lang\|="zh"]`	中文语言版本特殊样式

/* 匹配href属性以".pdf"结尾的链接 */
a[href$=".pdf"]::after {
  content: "📄";
}

/* 匹配title属性包含"warning"的元素 */
[title~="warning"] {
  border: 2px solid red;
}

2. 结构伪类选择器（Structural Pseudo-classes）

/* 匹配第三项 */
li:nth-child(3) { color: red; }

/* 选中偶数行列表项 */
li:nth-child(2n) {
  background: #f8f9fa;
}

/* 匹配奇数项 */
tr:nth-child(odd) { background: #f5f5f5; }

/* 选中第一个子元素 */
.container:first-child {
  margin-top: 0;
}

/* 匹配第一个段落 */
article p:first-of-type { font-weight: bold; }

/* 匹配空元素 */
div:empty {
  height: 20px;
  background: #eee;
}

3. 状态伪类选择器（UI State Pseudo-classes）

/* 禁用输入框样式 */
input:disabled {
  opacity: 0.5;
}

/* 单选按钮选中状态 */
input[type="radio"]:checked + label {
  font-weight: bold;
}

4. 否定伪类

/* 排除已删除项 */
li:not(.deleted) { display: block; }

/* 组合使用 */
input:not([type="submit"]) { width: 100%; }

css3增强中其他伪元素选择器

::before / ::after 一定得有content属性，其值可以为空字符串

.price::before {
  content: "¥";
  color: #f40;
}

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  /* ... */
}

::selection

::selection {
  background: #2196F3;
  color: white;
}

::placeholder

input::placeholder {
  color: #999;
  font-style: italic;
}

💎 组合选择器（Combinators）

/* 后代选择器 */
nav ul li { padding: 8px; }

/* 子元素选择器 */
.menu > li { border-bottom: 1px solid #ddd; }

/* 相邻兄弟选择器（匹配紧跟h1后的p） */
h1 + p {
  font-size: 1.2em;
}

/* 通用兄弟选择器（匹配h1之后的所有p） */
h1 ~ p {
  color: #666;
}

/* 并集选择器，多元素选择 */
h1, h2, h3 { font-family: 'Arial'; }

💡 核心要点总结

✅ 关键技术优势

精准定位‌
CSS3新增的:nth-child()、:not()等选择器实现原子级样式控制
动态响应‌
伪类选择器（如:hover、:focus）让交互状态可视化
代码优化‌
属性选择器减少不必要的class定义
‌语义增强‌
伪元素实现内容与样式分离

📌 最佳实践指南

/* 推荐写法：结合多个选择器 */
ul.menu > li:nth-child(n+2):not(.disabled) {
  border-top: 1px solid #ddd;
}

/* ❌ 不推荐 错误示范：避免过度嵌套 */
body div#main .content ul.list li.item a.link {} 

/* ✅ 推荐 优化方案：扁平化选择 */
.main-nav a {/* 直接类选择器 */}