基础选择器

基础选择器是 CSS 中最常用、最简单的选择器类型。它们构成了我们编写 CSS 样式的基础，掌握这些选择器是学习 CSS 的第一步。

元素选择器

元素选择器（也称为标签选择器）通过 HTML 元素的标签名来选择元素。这是最直接的选择方式。

语法

元素名 {
  属性: 值;
}

基本用法

/* 选择所有段落元素 */
p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* 选择所有标题元素 */
h1 {
  font-size: 32px;
  color: #2c3e50;
  margin-bottom: 20px;
}

h2 {
  font-size: 24px;
  color: #34495e;
  margin-bottom: 15px;
}

/* 选择所有链接元素 */
a {
  color: #3498db;
  text-decoration: none;
}

/* 选择所有列表项 */
li {
  margin-bottom: 8px;
}

实际应用

/* 网页整体排版 */
body {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f5f5f5;
}

/* 标题样式统一 */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  color: #2c3e50;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

/* 图片样式 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

使用场景

元素选择器适用于以下情况：

1. 全局样式设置：为某种类型的所有元素设置相同样式
2. 重置样式：清除浏览器的默认样式
3. 基础排版：设置字体、颜色、行高等基础样式

注意事项

元素选择器的优先级较低，容易被其他选择器覆盖：

/* 元素选择器 - 优先级低 */
p {
  color: blue;
}

/* 类选择器 - 优先级高，会覆盖上面的样式 */
.highlight {
  color: red;
}

类选择器

类选择器是 CSS 中最常用的选择器之一，它通过元素的 class 属性来选择元素。类选择器提供了极大的灵活性。

语法

.类名 {
  属性: 值;
}

基本用法

/* 选择所有具有 highlight 类的元素 */
.highlight {
  background-color: #fff3cd;
  padding: 10px;
  border-left: 4px solid #ffc107;
}

/* 选择所有具有 button 类的元素 */
.button {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

/* 选择所有具有 card 类的元素 */
.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

多类选择

一个元素可以有多个类，CSS 可以选择具有特定类组合的元素：

/* 只选择同时具有 button 和 primary 类的元素 */
.button.primary {
  background: #007bff;
}

/* 只选择同时具有 button 和 success 类的元素 */
.button.success {
  background: #28a745;
}

/* 只选择同时具有 button 和 danger 类的元素 */
.button.danger {
  background: #dc3545;
}

实际应用

/* 按钮组件 */
.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-outline {
  background-color: transparent;
  border: 2px solid #007bff;
  color: #007bff;
}

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
}

.btn-small {
  padding: 8px 16px;
  font-size: 14px;
}

使用场景

类选择器适用于以下情况：

1. 组件样式：为可复用的组件定义样式
2. 状态样式：表示元素的不同状态
3. 布局辅助：用于布局和定位
4. 主题样式：实现不同的主题变体

最佳实践

1. 使用有意义的类名

/* 推荐 - 语义化的类名 */
.article-title {
  font-size: 24px;
}

/* 不推荐 - 描述样式的类名 */
.big-text {
  font-size: 24px;
}

2. 避免过度使用类

<!-- 不推荐 -->
<div class="red bold large-text centered">内容</div>

<!-- 推荐 -->
<div class="heading">内容</div>

ID 选择器

ID 选择器通过元素的 id 属性来选择元素。在一个 HTML 文档中，id 属性的值应该是唯一的。

语法

#ID名 {
  属性: 值;
}

基本用法

/* 选择 ID 为 header 的元素 */
#header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px 0;
}

/* 选择 ID 为 main-content 的元素 */
#main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 选择 ID 为 footer 的元素 */
#footer {
  background: #333;
  color: white;
  padding: 30px 0;
  text-align: center;
}

实际应用

/* 页面布局 */
#page-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 1000;
}

#page-nav {
  background: #2c3e50;
  color: white;
}

#page-main {
  min-height: calc(100vh - 200px);
  padding-top: 80px;
}

#page-footer {
  background: #34495e;
  color: #ecf0f1;
  padding: 40px 0;
}

/* 特殊组件 */
#search-box {
  position: relative;
  margin: 20px 0;
}

#carousel {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

使用场景

ID 选择器适用于以下情况：

1. 页面布局：定义页面主要区域的样式
2. 唯一组件：页面中只出现一次的组件
3. JavaScript 钩子：为 JavaScript 操作提供标识

注意事项

1. ID 应该唯一

<!-- 错误 - ID 重复 -->
<div id="content">内容一</div>
<div id="content">内容二</div>

<!-- 正确 - 使用类选择器 -->
<div class="content">内容一</div>
<div class="content">内容二</div>

2. 避免过度使用 ID 选择器

/* 不推荐 - 过度使用 ID */
#header #nav #menu #item {
  color: white;
}

/* 推荐 - 使用类选择器 */
.nav-item {
  color: white;
}

通配符选择器

通配符选择器使用星号 * 来选择页面中的所有元素。

语法

* {
  属性: 值;
}

基本用法

/* 选择所有元素 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 选择某个元素内的所有子元素 */
.container * {
  box-sizing: border-box;
}

CSS 重置

通配符选择器常用于 CSS 重置：

/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 常用的 CSS 重置 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
}

使用场景

通配符选择器适用于以下情况：

1. CSS 重置：清除浏览器的默认样式
2. 全局设置：为所有元素设置通用属性
3. 调试：临时查看所有元素的样式

性能考虑

通配符选择器会匹配页面中的所有元素，可能会影响性能：

/* 不推荐 - 性能较差 */
* {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* 推荐 - 只对需要的元素应用 */
.card,
.panel,
.modal {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

选择器的组合使用

基础选择器可以组合使用，实现更精确的选择：

组合示例

/* 元素选择器 + 类选择器 */
p.highlight {
  background: yellow;
}

/* ID 选择器 + 类选择器 */
#header .logo {
  font-size: 24px;
}

/* 多个元素选择器 */
h1, h2, h3 {
  color: #333;
}

实际应用

/* 导航样式 */
#main-nav {
  background: #333;
  padding: 0 20px;
}

#main-nav a {
  color: white;
  text-decoration: none;
  padding: 15px 10px;
  display: inline-block;
}

#main-nav a:hover {
  background: #555;
}

/* 文章样式 */
.article h2 {
  font-size: 24px;
  margin-bottom: 15px;
}

.article p {
  line-height: 1.8;
  margin-bottom: 15px;
}

.article a {
  color: #3498db;
  text-decoration: underline;
}

选择器优先级

基础选择器的优先级从高到低：

1. ID 选择器 - 优先级最高
2. 类选择器 - 优先级中等
3. 元素选择器 - 优先级较低
4. 通配符选择器 - 优先级最低

/* 优先级：1,0,0 */
#content {
  color: red;
}

/* 优先级：0,1,0 */
.text {
  color: green;
}

/* 优先级：0,0,1 */
p {
  color: blue;
}

/* 优先级：0,0,0 */
* {
  color: black;
}

总结

基础选择器是 CSS 的基础，掌握它们对于编写有效的 CSS 至关重要：

1. 元素选择器：通过标签名选择元素，适用于全局样式
2. 类选择器：通过 class 属性选择元素，最常用且灵活
3. ID 选择器：通过 id 属性选择唯一元素，优先级最高
4. 通配符选择器：选择所有元素，常用于 CSS 重置

记住以下几点：

• 优先使用类选择器，避免过度使用 ID 选择器
• 使用有意义的类名，提高代码可读性
• ID 应该唯一，不要在多个元素上使用相同的 ID
• 通配符选择器会影响性能，谨慎使用
• 理解选择器的优先级，避免样式冲突