CSS选择器与盒模型：掌握元素样式

# 1. CSS选择器基础

## 1.1 什么是CSS选择器
CSS选择器是一种用于选择HTML、XML文档中特定元素的模式。通过选择器，我们可以选择并操作文档中的元素，使其具备不同的样式或行为。

## 1.2 基本选择器类型
### 1.2.1 元素选择器
元素选择器是最基本的选择器类型，通过选择HTML元素的标签名称来选择目标元素。例如，使用`p`选择器可以选择所有的段落元素。

p {
  color: blue;
}

### 1.2.2 类选择器
类选择器以`.`开头，后面跟着类名，用于选择具有相同类名的元素。类选择器给多个元素设置相同的样式非常方便。

.my-class {
  font-size: 16px;
}

### 1.2.3 ID选择器
ID选择器以`#`开头，后面跟着ID名称，用于选择具有唯一ID的元素。ID选择器是唯一的，每个文档中只能有一个相同ID。

#my-element {
  background-color: yellow;
}

## 1.3 层叠顺序与权重
在CSS中，多个选择器有可能同时作用于同一个元素，此时就需要确定优先级。层叠顺序和权重是决定优先级的两个重要因素。

### 1.3.1 层叠顺序
层叠顺序指的是元素在层叠上下文中的显示顺序。通常，后出现的元素会覆盖前面的元素。

### 1.3.2 权重
权重决定了当多个选择器作用于同一个元素时，哪个选择器的样式将生效。权重由四个部分组成，从左到右依次为：内联样式、ID选择器、类选择器和元素选择器。

以下是一个权重计算的示例：

#my-element {
  color: red;   /* 选择器权重：0,1,0,0 */
}

.my-class {
  color: blue;  /* 选择器权重：0,0,1,0 */
}

p {
  color: green; /* 选择器权重：0,0,0,1 */
}

在这个示例中，如果一个元素既有`id="my-element"`，又有`class="my-class"`，则最终生效的样式是红色（因为权重最高）。

本章介绍了CSS选择器的基础知识，包括什么是CSS选择器、基本选择器类型、层叠顺序和权重。通过熟练掌握选择器，我们可以更好地控制和修改元素的样式。

# 2. CSS选择器进阶

### 2.1 类选择器与ID选择器

在CSS中，除了基本选择器类型，还有两个非常常用的选择器是类选择器和ID选择器。

#### 类选择器

类选择器以`.`开头，用于选取具有相同类名的元素。类选择器可以在一个HTML文档中多次使用，并且一个元素可以同时具有多个类名。

<!-- HTML -->
<div class="box">这是一个带有类名box的div元素</div>
<p class="box">这是一个带有类名box的p元素</p>

/* CSS */
.box {
  color: red;
}

上述示例中，两个元素都具有类名为box，因此它们都会应用CSS选择器`.box`的样式，文本将显示为红色。

#### ID选择器

ID选择器以`#`开头，用于选取具有唯一ID的元素。ID是唯一的，因此每个HTML文档中只能使用一次。

<!-- HTML -->
<div id="container">这是一个唯一的div元素</div>

/* CSS */
#container {
  background-color: #ccc;
}

上述示例中，`div`元素具有唯一的ID`container`，因此仅此一个元素会应用CSS选择器`#container`的样式，背景颜色将变为灰色。

### 2.2 属性选择器

属性选择器允许根据元素的属性值选取元素。属性选择器使用方括号`[]`来定义，可以针对不同的属性进行精确选择。

<!-- HTML -->
<a href="https://www.example.com" target="_blank"></a>
<input type="text" disabled>

/* CSS */
a[href^="https"] {
  color: blue;
}

input[disabled] {
  background-color: #f5f5f5;
}

上述示例中，使用属性选择器可以根据元素的属性值来设置样式。`a`元素具有`href`属性值以`https`开头的链接将应用蓝色的文字颜色，而`input`元素具有`disabled`属性的输入框将应用浅灰色的背景颜色。

### 2.3 伪类与伪元素

伪类和伪元素是指在特定条件下选择元素的CSS选择器。

常见的伪类选择器有`:hover`、`:active`、`:visited`等，它们可以根据用户的行为状态（如悬停、点击、访问过等）来选取元素。

常见的伪元素选择器有`::before`和`::after`，它们可以在元素的前后插入内容。

<!-- HTML -->
<button>按钮</button>

/* CSS */
button:hover {
  background-color: yellow;
}

button::before {
  content: "前插入内容";
}

上述示例中，当鼠标悬停在按钮上时，按钮的背景颜色将变为黄色；同时，在按钮内容之前插入了一段文本。

这些是CSS选择器进阶的一些常用的技巧和特性，掌握了这些选择器的使用方法，能够更灵活地对元素进行样式调整。在实际开发中，可以根据具体需求选择合适的选择器来实现所需效果。

# 3. 盒模型入门

在 CSS 中，每个元素都被视为一个盒子，这个盒子由一系列的属性定义，用来描述元素在页面中的布局和样式。这种盒子模型的概念被称为盒模型。

#### 3.1 盒模型概述

盒模型可以分为两类：标准盒模型和IE盒模型。它们的区别在于边框（border）和尺寸（width、height）的计算方式不同。

标准盒模型的计算方式如下：

其中：

- 内容区域（content）：元素的实际内容，包括文本、图片等。
- 内边距（padding）：内容区域与边框之间的空白区域。
- 边框（border）：内容区域与外边距之间的边界。
- 外边距（margin）：边框与相邻元素之间的空白区域。

标准盒模型的尺寸计算公式为：

width = content width (including padding and border)
height = content height (including padding and border