CSS基础选择器详解

什么是CSS选择器？

CSS选择器是CSS规则的第一部分，它用于选择HTML元素，以便对其应用样式。选择器的作用是"选对人"，而CSS属性则是"做对事"，两者结合才能实现预期的样式效果。

基础选择器分类

基础选择器是由单个选择器组成的，是CSS中最常用、最基础的选择器类型。主要包括以下四种：

1. 类型选择器（标签选择器）

语法：直接使用HTML标签名作为选择器

div {
  color: gold;
}

span {
  color: green;
}

作用：选择所有指定类型的HTML元素

特点：

作用范围广，会匹配页面中所有该类型的元素
优先级较低，容易被其他选择器覆盖
常用于设置基础样式，如body、p等标签的默认样式

2. 类选择器

语法：以.开头，后跟自定义的类名

.box {
  color: gold;
}

.pink-text {
  color: pink;
}

HTML使用：通过class属性引用类名

1
2
3

<div class="box">我是盒子</div>
<p class="pink-text">我是粉色文字</p>
<div class="box pink-text">我同时拥有两个类</div>

特点：

类名自定义，需遵循一定命名规范
可以为多个元素添加同一个类，实现样式复用
一个元素可以同时拥有多个类，类名之间用空格分隔
是实际开发中最常用的选择器

命名规范：

不能是中文或纯数字
多个单词组成时，建议使用短横线-连接（如：nav-item）
命名要有意义，见名知义（如：btn-primary表示主要按钮）

3. ID选择器

语法：以#开头，后跟自定义的ID名

#header {
  color: red;
}

#main-content {
  background-color: #f5f5f5;
}

HTML使用：通过id属性引用ID名

1 2	<header id="header">网站头部</header> <main id="main-content">主要内容</main>

特点：

ID名在同一页面中必须唯一，不能重复
优先级较高，常用于标识页面中的唯一元素
主要配合JavaScript使用，实现交互效果

注意事项：

避免过度使用ID选择器，以免样式冲突
尽量使用类选择器进行样式设计

4. 通配符选择器

语法：使用*作为选择器

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

作用：选择页面中的所有元素

特点：

作用范围最广，会匹配所有元素
优先级最低
常用于全局样式重置，如清除默认边距

注意事项：

性能较差，应慎用
建议只在必要时使用，如全局样式重置

基础选择器优先级

当多个选择器作用于同一个元素时，浏览器会根据优先级规则决定最终生效的样式。基础选择器的优先级从高到低依次为：

ID选择器 > 类选择器 > 类型选择器 > 通配符选择器

CSS层叠性

CSS规则可以同时作用于一个元素，浏览器通过特定规则决定最终生效的样式，这就是CSS的层叠性。层叠性解决了样式冲突问题，其基本原则是：

优先级高的选择器样式会覆盖优先级低的样式
当优先级相同时，后定义的样式会覆盖先定义的样式（就近原则）

CSS书写规范

良好的CSS书写规范可以提高代码的可读性和可维护性：

选择器和大括号{之间保留1个空格
属性名和属性值之间保留1个空格
每个CSS属性单独占一行
合理使用注释，注释内容左右两侧保留1个空格

/* 正确的书写规范 */
.box {
  color: gold;
  font-size: 18px;
  background-color: #f0f0f0;
}

实际应用案例

案例1：基础布局 - 画盒子

<div class="container">
  <div class="box box-red"></div>
  <div class="box box-blue"></div>
  <div class="box box-green"></div>
</div>

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 容器样式 */
.container {
  width: 600px;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
}

/* 基础盒子样式 */
.box {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 不同颜色的盒子 */
.box-red {
  background-color: #ff4444;
}

.box-blue {
  background-color: #3366ff;
}

.box-green {
  background-color: #44bb88;
}

案例2：导航菜单样式

<nav id="main-nav">
  <ul class="nav-list">
    <li class="nav-item"><a href="#">首页</a></li>
    <li class="nav-item"><a href="#">关于我们</a></li>
    <li class="nav-item"><a href="#">产品中心</a></li>
    <li class="nav-item"><a href="#">联系我们</a></li>
  </ul>
</nav>

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

/* 导航列表样式 */
.nav-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

/* 导航项样式 */
.nav-item {
  margin-right: 20px;
}

/* 导航链接样式 */
.nav-item a {
  color: white;
  text-decoration: none;
  padding: 15px 10px;
  display: block;
  transition: background-color 0.3s;
}

/* 导航链接 hover 效果 */
.nav-item a:hover {
  background-color: #555;
}