CSS基础完全指南：从选择器到伪类的全面解析

爱编程的喵
146 阅读6分钟

📖 本文将带你深入了解CSS的核心概念，从基础语法到各种选择器的实际应用，助你打造精美的网页样式。

前言

CSS（Cascading Style Sheets，层叠样式表）是前端开发的三大基石之一，掌握CSS基础对于每一个前端开发者都至关重要。本文将通过理论讲解和实际代码示例，帮你全面掌握CSS的核心知识点。

🎯 CSS基础概念

CSS的核心组成

在深入学习之前，我们先了解CSS的基本组成：

  • 声明（Declaration） ：一个属性与值的键值对，如 color: blue
  • 声明块（Declaration Block） ：用大括号 {} 包围的多个声明的集合
  • 选择器（Selector） ：指定样式作用的目标元素
  • 规则集（Ruleset） ：选择器加上声明块组成的完整CSS规则

让我们通过一个简单的例子来理解：

/* 这是一个完整的CSS规则集 */
p {                    /* 选择器 */
  color: blue;         /* 声明 */
  font-size: 16px;     /* 声明 */
}                      /* 声明块 */

CSS层叠特性实例

CSS的"层叠"特性是其核心概念之一。当多个规则作用于同一个元素时，CSS会根据特定的优先级规则来决定最终的样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS层叠示例</title>
  <style>
    /* 元素选择器 - 优先级最低 */
    p {
      color: blue;
    }
    
    /* 类选择器 - 中等优先级 */
    .container p {
      color: red;
    }
    
    /* ID选择器 - 最高优先级 */
    #main p {
      color: green;
    }
  </style>
</head>
<body>
  <p>这个段落是蓝色的</p>
  <div id="main" class="container">
    <p>这个段落是绿色的（ID选择器优先级最高）</p>
  </div>
</body>
</html>

在这个例子中，虽然有三个规则都试图改变段落的颜色，但由于CSS的优先级规则，最终 #main 内的段落显示为绿色。

image.png

🔍 CSS选择器详解

关系选择器

CSS提供了多种关系选择器来精确定位元素：

1. 相邻兄弟选择器（+）

选择紧挨着指定元素的下一个兄弟元素：

h1 + p {
  color: red;
}

2. 通用兄弟选择器（~）

选择指定元素之后的所有同级兄弟元素：

h1 ~ p {
  color: blue;
}

3. 子选择器（>）

选择指定元素的直接子元素：

.container > p {
  font-weight: bold;
}

4. 后代选择器（空格）

选择指定元素内的所有后代元素：

.container p {
  text-decoration: underline;
}

让我们看一个完整的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关系选择器示例</title>
  <style>
    h1 + p {
      color: red;  /* 紧挨着h1的第一个p元素 */
    }
    
    h1 ~ p {
      color: blue; /* h1之后的所有p元素 */
    }
    
    .container > p {
      font-weight: bold; /* container的直接子p元素 */
    }
    
    .container p {
      text-decoration: underline; /* container内所有p元素 */
    }
  </style>
</head>
<body>
  <div class="container">
    <p>这是标题之前的段落</p>
    <h1>标题</h1>
    <p>这是第一段文字（红色+粗体+下划线）</p>
    <p>这是第二段文字（蓝色+粗体+下划线）</p>
    <div class="inner">
      <p>这是一个内部段落（蓝色+下划线，不粗体）</p>
    </div>
  </div>
</body>
</html>

image.png

🎨 伪类选择器深入解析

伪类选择器是CSS中最强大的功能之一，它允许我们基于元素的状态、位置和用户交互来应用样式。

交互伪类

这些伪类响应用户的交互行为：

/* 按钮被点击时的样式 */
button:active {
  background-color: red;
  color: white;
}

/* 鼠标悬停时的样式 */
p:hover {
  background-color: rgb(151, 32, 225);
}

/* 文本被选中时的样式 */
::selection {
  background-color: rgb(49, 61, 236);
  color: rgb(240, 240, 245);
}

状态伪类

基于表单元素的状态应用样式：

/* 输入框获得焦点时 */
input:focus {
  border: 2px solid rgb(35, 38, 213);
}

/* 复选框被选中时，同时改变相邻标签的样式 */
input:checked + label {
  font-weight: bold;
}

结构伪类

最实用的伪类之一，可以基于元素在文档中的位置选择元素：

/* 选择奇数位置的列表项 */
li:nth-child(odd) {
  background-color: lightgrey;
}

/* 选择偶数位置的列表项 */
li:nth-child(even) {
  background-color: gray;
}

条件伪类

使用:not()可以排除特定的元素：

/* 除了最后一个列表项，其他都添加下边距 */
li:not(:last-child) {
  margin-bottom: 10px;
}

完整的伪类示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器完整示例</title>
  <style>
    /* 交互伪类 */
    button:active {
      background-color: red;
      color: white;
    }
    
    p:hover {
      background-color: rgb(151, 32, 225);
    }
    
    ::selection {
      background-color: rgb(49, 61, 236);
      color: rgb(240, 240, 245);
    }
    
    /* 状态伪类 */
    input:focus {
      border: 2px solid rgb(35, 38, 213);
    }
    
    input:checked + label {
      font-weight: bold;
    }
    
    /* 结构伪类 */
    li:nth-child(odd) {
      background-color: lightgrey;
    }
    
    li:nth-child(even) {
      background-color: gray;
    }
    
    /* 条件伪类 */
    li:not(:last-child) {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>伪类选择器示例</h1>
    <button>点击我</button>
    <p>鼠标悬浮在这里</p>
    <input type="text" placeholder="输入框" autofocus>
    <input type="checkbox" id="option1">
    <label for="option1">选项1</label>
    <input type="checkbox" checked id="option2">
    <label for="option2">选项2</label>
    <ul>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
      <li>列表4</li>
    </ul>
  </div>
</body>
</html>

image.png

image.png

🤔 nth-child vs nth-of-type：你真的理解吗？

这是CSS中容易混淆的概念，让我们通过实例来理解它们的区别：

nth-child

  • 计算所有兄弟元素的位置
  • 不区分元素类型

nth-of-type

  • 只计算相同类型元素的位置
  • 区分元素类型
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>nth-child vs nth-of-type</title>
  <style>
    /* 选择第2个子元素（不管是什么类型） */
    .container p:nth-child(2) {
      color: #000000;
      background-color: rgb(223, 237, 34);
    }
    
    /* 选择第3个p元素（只计算p元素） */
    .container p:nth-of-type(3) {  
      color: #000000;
      background-color: rgb(236, 147, 22);
    }
    
    /* ID和类选择器组合 */
    .container#demo {
      background-color: rgb(72, 243, 29);
    }
  </style>
</head>
<body>
  <div class="container" id="demo">
    <h1>nth-child vs nth-of-type</h1>      <!-- 第1个子元素 -->
    <p>这是一个段落</p>                    <!-- 第2个子元素，第1个p元素 -->
    <div>这是一个div</div>                 <!-- 第3个子元素 -->
    <p>这是第二个段落</p>                  <!-- 第4个子元素，第2个p元素 -->
    <p>这是第三个段落</p>                  <!-- 第5个子元素，第3个p元素 -->
    <div>这是第二个div</div>              <!-- 第6个子元素 -->
  </div>
</body>
</html>

image.png

在这个例子中：

  • p:nth-child(2) 选择的是第2个子元素且是p元素的元素（"这是一个段落"）
  • p:nth-of-type(3) 选择的是第3个p元素（"这是第三个段落"）

📚 实践建议

1. 选择器优先级记忆法

内联样式 > ID选择器 > 类选择器 > 元素选择器

2. 常用伪类组合

/* 表单美化 */
input:focus:valid {
  border-color: green;
}

input:focus:invalid {
  border-color: red;
}

/* 列表美化 */
li:first-child {
  border-top: none;
}

li:last-child {
  border-bottom: none;
}

3. 性能优化提示

  • 避免过度嵌套的选择器
  • 尽量使用类选择器而非复杂的关系选择器
  • 合理使用通配符选择器

🎯 总结

CSS基础虽然看似简单，但其中蕴含着丰富的知识点。掌握好这些基础概念：

  1. CSS基本语法：声明、声明块、选择器、规则集
  2. 层叠特性：理解优先级规则
  3. 关系选择器：灵活运用各种关系选择器
  4. 伪类选择器：掌握交互、状态、结构、条件伪类
  5. 结构伪类区别：理解nth-child和nth-of-type的差异

这些知识点将为你后续学习更高级的CSS特性打下坚实的基础。记住，理论结合实践才是最好的学习方法，建议大家多动手写代码，在实践中加深理解。

avatar
文章
阅读
粉丝