CSS 基础精讲：从声明到选择器的深度剖析

一、CSS 基础概念

1. 声明（declaration）

   • 一个属性与值的键值对称为声明。例如，在 color: red; 中，color 是属性，red 是值，合起来就构成了一个声明，用于指定元素的文本颜色为红色。

2. 声明块

   • 一个声明块用大括号 {} 包裹，其中可以包含多个声明。比如：

     复制

     {
       color: red;
       font-size: 14px;
     }
     

     这里定义了两个声明，分别设置了颜色和字体大小。

3. 选择器与规则集（ruleset）

   • 规则集由选择器和声明块组成。选择器用于确定将样式应用于哪些 HTML 元素，多个规则集构成了我们的 CSS 样式表。例如：

     复制

     p {
       color: red;
       font-size: 14px;
     }
     

     p 就是选择器，选中页面中的段落元素，为其应用声明块中的样式。

4. CSS（层叠样式表）

   • CSS 是一种样式表语言，用于为 HTML 文档添加样式，其核心特性是层叠性，我们可以从不同来源（如浏览器默认样式、外部样式表、内部样式表等）获取样式规则，这些规则按照一定的优先级层叠在一起，最终确定元素的呈现样式。

二、CSS 选择器详解

1. 兄弟选择器

   • 紧邻兄弟选择器（+） ：用于选择紧挨在另一个元素后的元素。例如：

     复制

     div + p {
       color: blue;
     }
     

     这个选择器会选择紧接在 div 元素之后的 p 元素，只影响第一个符合条件的兄弟元素。

   • 通用兄弟选择器（~） ：用于选择某个元素之后的所有具有相同父元素的指定兄弟元素。比如：

     复制

     div ~ p {
       color: green;
     }
     

     它会选择 div 元素之后的所有同父元素的 p 元素，相比紧邻兄弟选择器，选择范围更广。

2. 子选择器（>）

用于选择某个元素的直接子元素。例如：

复制

ul > li {
  color: purple;
}

这里只选择 ul 元素的直接子元素 li，不会影响嵌套在其他层级的 li 元素，帮助我们精准控制样式应用范围。

3. 伪类选择器（:）

   • 伪类选择器用于选择处于特定状态的元素，或者选择不能通过常规选择器选中的元素。常见的有：

     • :hover ：当鼠标悬停在元素上时应用样式。例如：

       复制

       a:hover {
         color: orange;
       }
       

       当鼠标移到链接上，文字颜色会变为橙色。

     • :nth-child(n) 和 :nth-of-type(n) ：这两个结构伪类用于根据元素在父元素中的位置选择元素。

       • .container p:nth-child(3) ：选择 .container 元素下的第三个子元素，若该元素是 p 元素，则选中；否则不选中。它注重元素在整个父元素子元素序列中的序号，不考虑元素类型。
       • .container p:nth-of-type(3) ：选择 .container 元素下的第三个 p 元素，只考虑同类型的元素在父元素中的顺序编号，更专注于特定类型元素的排列。

CSS 基础知识是前端开发的基石，掌握好声明、选择器等基本概念和用法，能帮助我们更高效地为网页添加样式，打造出美观且富有个性的页面布局。通过不断实践和深入学习，我们可以更好地运用 CSS 的强大功能，提升前端开发的技能水平。