---

关于本文

本文主要介绍CSS的盒子模型和各种选择器，包含消息的代码和演示效果图。

---

1 盒子模型

• 盒子模型（Box Model）是CSS（层叠样式表）中用于描述HTML元素布局的一个概念。
• 它包括元素的四个部分：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。
• 盒子模型的示意图如下：
  
• 每一部分的解释如下：

  • 内容（Content）：这是盒子模型的核心部分，包含实际的HTML内容，如文本、图片等。内容的尺寸由内容本身决定，但可以通过CSS设置宽度（width）和高度（height）属性来控制。

  • 内边距（Padding）：位于内容和边框之间，用于在内容周围添加空间。内边距是透明的，不会影响元素的最终尺寸。

  • 边框（Border）：围绕内边距，为元素添加一个边框。边框的宽度会影响元素的总宽度和高度，因为它是包含在元素尺寸内的。

  • 外边距（Margin）：位于边框外部，用于在元素之间添加空间。外边距是透明的，并且可以有多个元素的外边距相互折叠。

---

2 选择器

2.1 元素选择器：元素名

• 元素选择器：通过元素的名称来选择元素

• 示例代码：
  

• 效果：这会选择所有的<p>元素，并将其文本颜色设置为蓝色，粗体：
  

2.2 类选择器：“.”

• 类选择器：通过元素的class属性来选择元素。
• 示例代码：
  
• 效果：这会选择所有具有class="highlight"的元素，并给它们添加黄色背景：
  

2.3 ID选择器：“#”

• ID选择器：通过元素的id属性来选择元素，ID在同一个页面中是唯一的。
• 示例代码：
  
• 效果：这会选择ID为header的元素，并设置其文字颜色为红色，粗体：
  

2.4 属性选择器：元素名[属性名=“属性值”]

• 属性选择器：根据元素的属性及其值来选择元素。
• 示例代码：
  
• 效果：这会选择所有type属性为text的元素，并给它们添加边框，背景色设置为小麦色：
  

2.5 伪类选择器：“:”

• 伪类选择器：用于选择处于特定状态的元素。
• 示例代码：
  
• 效果：这会选择所有处于鼠标悬停状态的按钮，并设置背景颜色为红色：
  

2.6 伪累选择器：“::”

• 伪类选择器：用于选择元素的特定部分
• 示例代码：
  - 效果：这会选择所有<p>元素的第一行，并使其字体加粗，文字颜色为红色：
  

2.7 后代选择器：“父 子”

• 后代选择器：通过空格分隔，选择作为某元素后代的元素

• 示例代码：
  

• 效果：这会将<div>元素的所有<p>后代（只要是包含在<div>里面的就是后代，应该和子代区分开）字体设置为红色粗体：
  

2.8 子代选择器：“>”

• 子代选择器：通过>符号分隔，选择作为某元素直接子代的元素
• 示例代码：
  
• 效果：这会选择所有直接在<div>内部的<p>元素子代，而不选择非直接的后代，并设置他们的字体为红色粗体：
  

2.9 相邻兄弟选择器：“+”

• 相邻兄弟选择器：通过“+”符号分隔，选择紧随其后的兄弟元素
• 示例代码：
  
• 效果：这会选择所有紧随在<h1>标签之后的<h2>标签，并设置其文字为红色：
  

2.10 通用兄弟选择器：“~”

• 通用兄弟选择器：通过“~”符号分隔，选择所有后续的兄弟元素
• 示例代码：
  
• 效果：这会选择所有在<h1>元素之后的<h2>元素，并设置他字体的颜色为红色：
  

2.11 分组选择器：“,”

• 分组选择器：通过逗号分隔，对多个选择器应用相同的样式
• 示例代码：
  
• 效果：这会选择所有的<h1>和<h2>元素，并设置他们的文字颜色为红色：