基本选择器（元素、类、ID）

基本选择器（元素、类、ID）

CSS选择器是样式规则的核心部分，用于指定哪些HTML元素应该应用特定的样式。基本选择器包括元素选择器、类选择器和ID选择器，它们是最基础也是最常用的选择器类型。

元素选择器

元素选择器直接使用HTML标签名称作为选择器，它会匹配文档中所有该类型的元素。这种选择器通常用于设置全局样式或重置默认样式。

<p>这是一个段落</p>
<div>这是一个div</div>

/* 所有p元素都会应用这些样式 */
p {
  color: blue;
  font-size: 16px;
}

/* 所有div元素都会应用这些样式 */
div {
  background-color: #f0f0f0;
  padding: 10px;
}

元素选择器可以组合使用，为多个元素设置相同的样式：

h1, h2, h3 {
  font-family: 'Arial', sans-serif;
  margin-bottom: 15px;
}

类选择器

类选择器以点号(.)开头，后面跟着类名。它可以应用于HTML中任何具有对应class属性的元素，一个元素可以有多个类，一个类也可以应用于多个元素。

<div class="box warning">警告框</div>
<p class="warning">警告文本</p>
<button class="btn primary">主要按钮</button>

/* 所有具有warning类的元素 */
.warning {
  color: red;
  border: 1px solid red;
  padding: 10px;
}

/* 特定元素的类选择器 */
div.box {
  width: 200px;
  height: 200px;
  background-color: #eee;
}

/* 组合类选择器 */
.btn.primary {
  background-color: #0066cc;
  color: white;
}

类选择器非常灵活，可以创建可重用的样式组件。例如，可以创建一个按钮系统：

.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn.primary {
  background-color: #0066cc;
  color: white;
}

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

.btn.danger {
  background-color: #dc3545;
  color: white;
}

ID选择器

ID选择器以井号(#)开头，后面跟着ID名称。它用于选择具有特定ID属性的元素，ID在文档中应该是唯一的。

<div id="header">网站头部</div>
<nav id="main-navigation">主导航</nav>
<section id="content">主要内容区域</section>

#header {
  background-color: #333;
  color: white;
  padding: 20px;
}

#main-navigation {
  background-color: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

#content {
  margin: 20px auto;
  max-width: 1200px;
}

ID选择器的特殊性高于类选择器，这意味着当样式冲突时，ID选择器的样式会覆盖类选择器的样式：

<div id="special-box" class="box">特殊盒子</div>

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

#special-box {
  background-color: red; /* 这个样式会覆盖.box的背景色 */
}

选择器的组合使用

基本选择器可以组合使用，创建更具体的选择规则：

<ul class="menu">
  <li class="item active">首页</li>
  <li class="item">产品</li>
  <li class="item">关于我们</li>
</ul>

/* 只选择menu类中的item类 */
.menu .item {
  padding: 8px 12px;
  display: inline-block;
}

/* 更具体的选择 - menu类中的active类 */
.menu .active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

选择器的特殊性

当多个选择器指向同一个元素时，CSS有一套特殊性规则来决定哪个样式会被应用：

1. ID选择器: 每个ID选择器加100
2. 类选择器、属性选择器和伪类: 每个加10
3. 元素选择器和伪元素: 每个加1

/* 特殊性: 1 */
div {
  color: black;
}

/* 特殊性: 10 */
.container {
  color: blue;
}

/* 特殊性: 100 */
#main-content {
  color: red;
}

/* 特殊性: 1 + 10 = 11 */
div.special {
  color: green;
}

/* 特殊性: 10 + 10 = 20 */
.container .highlight {
  color: purple;
}

实际应用示例

创建一个简单的卡片组件：

<div class="card" id="featured-card">
  <h2 class="card-title">特色产品</h2>
  <div class="card-content">
    <p>这是我们的特色产品描述...</p>
    <button class="btn primary">立即购买</button>
  </div>
</div>

/* 基础卡片样式 */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 300px;
  overflow: hidden;
}

/* 卡片标题 */
.card-title {
  background-color: #f8f9fa;
  padding: 12px 16px;
  margin: 0;
  font-size: 1.2em;
  border-bottom: 1px solid #ddd;
}

/* 卡片内容 */
.card-content {
  padding: 16px;
}

/* 特色卡片特殊样式 */
#featured-card {
  border: 2px solid #007bff;
}

#featured-card .card-title {
  background-color: #007bff;
  color: white;
}

选择器的最佳实践

1. 尽量使用类选择器而不是ID选择器，因为类选择器更灵活且可重用
2. 避免过度使用元素选择器，因为它们不够具体且可能影响性能
3. 保持选择器的简洁性，避免过长的选择器链
4. 使用有意义的命名，如.btn-primary比.blue-button更好
5. 考虑使用BEM等命名约定来组织类名

/* BEM命名示例 */
.menu {
  /* 块样式 */
}

.menu__item {
  /* 元素样式 */
}

.menu__item--active {
  /* 修饰符样式 */
}

浏览器兼容性考虑

基本选择器在所有现代浏览器中都有很好的支持，包括：

• 元素选择器
• 类选择器
• ID选择器

即使是较旧的浏览器如IE6也支持这些基本选择器。然而，在使用CSS预处理器如Sass或Less时，嵌套的选择器最终会被编译为这些基本选择器。