CSS 基础选择器总结

选择器分类

1. 三种样式书写方式

<!-- 外链样式 -->
<link rel="stylesheet" href="style.css" />

<!-- 内嵌样式 -->
<style>
  h1 { color: red; }
</style>

<!-- 行内样式 -->
<h1 style="color: blue;">标题</h1>

2. 基础选择器

3. 复合选择器

选择器优先级

优先级计算

!important (∞) > 行内样式 (1000) > ID选择器 (100) > 类选择器 (10) > 标签选择器 (1) > 通配符选择器 (0)

计算示例

/* 优先级: 1 */
div { }

/* 优先级: 10 */
.box { }

/* 优先级: 100 */
#box { }

/* 优先级: 11 (1 + 10) */
div.box { }

/* 优先级: 12 (1 + 1 + 10) */
div p.box { }

/* 优先级: 110 (100 + 10) */
#box.special { }

/* 优先级: 20 (10 + 10) */
.box.highlight { }

选择器特点对比

标签选择器

div {
  color: red;
}

优点: 简单直观
缺点: 优先级低,缺乏特异性
适用: 全局样式重置、统一默认样式

类选择器

.box {
  color: red;
}

优点: 可复用、灵活、优先级适中
缺点: 需要规划类名
适用: 组件样式、工具类、响应式设计(推荐)

ID 选择器

#box {
  color: red;
}

优点: 优先级高、语义明确
缺点: 不可复用、优先级过高
适用: 页面布局、唯一元素、锚点定位

后代选择器

div p {
  color: red;
}

优点: 精确控制、结构清晰
缺点: 优先级累加、性能问题
适用: 组件内部样式、避免样式污染

实际应用场景

场景1: 页面布局

<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>

/* 使用 ID 选择器 */
#header, #nav, #main, #sidebar, #footer {
  /* ... */
}

场景2: 组件样式

<div class="card">
  <div class="card__header">头部</div>
  <div class="card__body">内容</div>
</div>

/* 使用类选择器 */
.card { }
.card__header { }
.card__body { }

场景3: 全局样式重置

/* 通配符选择器 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 标签选择器 */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

ul, ol {
  list-style: none;
}

场景4: 工具类

<div class="text-center m-20 p-10 bg-blue">内容</div>

/* 类选择器 - 原子类 */
.text-center { text-align: center; }
.m-20 { margin: 20px; }
.p-10 { padding: 10px; }
.bg-blue { background-color: blue; }

场景5: 组件内部样式

<div class="card">
  <p>段落</p>
  <a href="#">链接</a>
</div>

/* 后代选择器 */
.card p {
  margin: 10px 0;
}

.card a {
  color: #007bff;
}

选择器使用建议

1. 优先级选择

类选择器 > 标签选择器 > ID 选择器(尽量少用)

2. 选择器深度

避免过深嵌套: div div div p { }
推荐: .text-content { }

3. 命名规范

<!-- 推荐: 连字符命名法 -->
<div class="main-content"></div>
<div class="user-profile"></div>

<!-- BEM 规范 -->
<div class="card">
  <div class="card__header">头部</div>
  <div class="card__body card__body--large">内容</div>
</div>

4. 避免使用

/* 不推荐: 过度使用通配符选择器 */
* {
  color: red;
  font-size: 14px;
}

/* 不推荐: 过度使用 !important */
.text {
  color: red !important;
}

/* 不推荐: 优先级过高 */
body #main .container .box .text {
  color: red;
}

选择器最佳实践

1. 使用类选择器为主

<!-- 推荐 -->
<div class="card">卡片</div>
<button class="btn">按钮</button>

<!-- 不推荐 -->
<div id="card1">卡片</div>
<button id="btn1">按钮</button>

2. 遵循命名规范

<!-- 推荐: 有意义的类名 -->
<div class="user-profile">用户资料</div>
<div class="search-form">搜索表单</div>

<!-- 不推荐: 无意义的类名 -->
<div class="box1">用户资料</div>
<div class="div2">搜索表单</div>

3. 控制选择器深度

/* 不推荐: 过深嵌套 */
body #main .container .box .content p {
  color: red;
}

/* 推荐: 简洁选择器 */
.content p {
  color: red;
}

4. 合理使用后代选择器

/* 推荐: 用于组件内部样式 */
.card p { }
.card a { }

/* 不推荐: 全局后代选择器 */
div p { }
body div { }

常见问题

Q1: 如何覆盖框架的默认样式?

A: 使用更高优先级的选择器。

/* 框架样式 */
.btn {
  padding: 10px 20px;
}

/* 覆盖样式 */
.btn-primary.btn-large {
  padding: 15px 30px;
}

Q2: 类选择器和 ID 选择器如何选择?

A:

• 可复用样式: 使用类选择器
• 唯一元素: 使用 ID 选择器
• 推荐: 优先使用类选择器

Q3: 如何避免样式冲突?

A:

• 使用有意义的类名
• 遵循命名规范(BEM)
• 控制选择器深度
• 避免使用通配符选择器

Q4: 什么时候使用后代选择器?

A:

• 组件内部样式
• 避免样式污染
• 不要用于全局样式

学习要点总结

1. 三种样式: 外链(推荐) > 内嵌 > 行内(优先级)
2. 基础选择器: ID(100) > 类(10) > 标签(1) > 通配符(0)
3. 优先级计算: 选择器优先级相加,相同优先级后定义胜出
4. 命名规范: 推荐使用连字符命名法和 BEM 规范
5. 选择建议: 优先使用类选择器,控制选择器深度
6. 避免使用: 通配符选择器(过度使用)、!important、过深嵌套
7. 最佳实践: 有意义的命名、合理的优先级、简洁的选择器