1.3.1 CSS选择器入门 -TypeScript和Vue从入门到精通(一)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(一)

### 1.3.1 CSS选择器入门

在Web开发中，CSS（层叠样式表）扮演着至关重要的角色，它负责控制HTML文档的布局和样式。而CSS选择器则是实现这一功能的核心工具，它们允许开发者精确地指定哪些HTML元素应该被应用特定的样式规则。本章节将带领你从零开始，深入了解CSS选择器的基础知识，为后续的Vue与TypeScript开发奠定坚实的样式控制基础。

#### 1.3.1.1 选择器概述

CSS选择器是一种模式，用于选择需要应用样式的HTML元素。一个基本的CSS规则由选择器和一对大括号内的声明块组成，其中声明块包含了一个或多个属性-值对，用于定义元素的样式。例如：

```css
p {
  color: blue;
}
```

上述规则表示所有`<p>`元素（即段落）的文本颜色将被设置为蓝色。这里的`p`就是一个简单的选择器，它直接匹配HTML中的`<p>`标签。

#### 1.3.1.2 类型选择器

类型选择器（也称为元素选择器）是最基本的选择器类型，它们直接对应于HTML文档中的元素类型。例如：

- `div`：选择所有`<div>`元素。
- `h1`：选择所有`<h1>`（一级标题）元素。
- `a`：选择所有`<a>`（超链接）元素。

类型选择器易于理解和使用，但在处理复杂布局时可能显得力不从心。

#### 1.3.1.3 类选择器

类选择器允许你根据元素的`class`属性来选择元素。在HTML中，`class`属性可以应用于任何元素，且一个元素可以有多个类名（类名之间用空格分隔）。类选择器以点（`.`）开头，后跟类名。例如：

```html
<div class="box">这是一个盒子</div>
```

```css
.box {
  border: 1px solid black;
  padding: 10px;
}
```

上述CSS规则会将所有具有`class="box"`的元素的边框设置为1像素宽的黑色实线，并添加10像素的内边距。

#### 1.3.1.4 ID选择器

ID选择器与类选择器类似，但它基于元素的`id`属性来选择元素。每个ID在HTML文档中必须是唯一的，因此ID选择器也用于选中单个元素。ID选择器以井号（`#`）开头，后跟ID名。例如：

```html
<div id="uniqueElement">这是唯一的元素</div>
```

```css
#uniqueElement {
  background-color: yellow;
}
```

这会改变`id="uniqueElement"`的元素的背景色为黄色。

#### 1.3.1.5 属性选择器

属性选择器允许你根据元素的属性及其值来选择元素，而不仅仅是元素的类型、类或ID。它们提供了更细粒度的选择能力。属性选择器可以基于是否存在某个属性、属性的确切值、属性值的一部分或属性值的状态（如以特定字符开头或结尾）来选择元素。例如：

- `[type="text"]`：选择所有`type`属性值为`text`的元素（常用于表单输入）。
- `[class~="value"]`：选择具有`class`属性，且`class`属性值列表中包含`value`的元素（`value`为`class`值之一，与其他值由空格分隔）。
- `[attribute^="value"]`：选择`attribute`属性值以`value`开头的元素。

#### 1.3.1.6 后代选择器

后代选择器用于选择某个元素内部的所有后代元素，不论这些后代元素嵌套多深。后代选择器通过空格分隔两个选择器来表示。例如：

```css
div p {
  color: green;
}
```

这条规则会将所有位于`<div>`元素内部的`<p>`元素的文本颜色设置为绿色，无论这些`<p>`元素是直接子元素还是更深层次的嵌套元素。

#### 1.3.1.7 子选择器

与后代选择器不同，子选择器（使用`>`符号）仅选择直接子元素。例如：

```css
ul > li {
  list-style-type: none;
}
```

这会将所有直接位于`<ul>`元素下的`<li>`元素的列表样式类型设置为无（即不显示项目符号）。

#### 1.3.1.8 相邻兄弟选择器

相邻兄弟选择器（使用`+`符号）用于选择紧接在另一元素后的元素，且二者具有相同的父元素。例如：

```css
h1 + p {
  font-size: 18px;
}
```

这会将所有紧跟在`<h1>`元素后的`<p>`元素的字体大小设置为18像素。

#### 1.3.1.9 通用兄弟选择器

通用兄弟选择器（使用`~`符号）用于选择某元素之后的所有兄弟元素，且这些元素共享相同的父元素。与相邻兄弟选择器不同，通用兄弟选择器不需要元素之间紧密相连。例如：

```css
h1 ~ p {
  color: red;
}
```

这会将所有`<h1>`元素之后的所有`<p>`元素（在同一父元素下）的文本颜色设置为红色。

#### 1.3.1.10 伪类与伪元素

伪类和伪元素是CSS中用于定义元素的特殊状态或附加部分的选择器。虽然它们在概念上有所不同（伪类用于选择元素的特定状态，如`:hover`表示鼠标悬停状态；伪元素用于样式化元素的某个部分，如`::before`用于在元素内容前添加内容），但在实际使用中，它们都是强大的样式化工具。

- 伪类示例：`:hover`、`:active`、`:first-child`、`:nth-child(n)`等。
- 伪元素示例：`::before`、`::after`、`::first-letter`、`::first-line`等。

#### 1.3.1.11 组合使用选择器

CSS选择器可以组合使用，以实现更复杂的选择逻辑。例如，你可以结合使用类型选择器、类选择器、ID选择器以及伪类和伪元素来精确地定位并样式化页面上的特定元素。

```css
#main div.content p:first-child {
  font-weight: bold;
}
```

这条规则会选择ID为`main`的元素内部，类名为`content`的`div`元素中的第一个`<p>`元素，并将其字体加粗。

#### 结语

通过本章节的学习，你应该对CSS选择器有了全面的认识，包括类型选择器、类选择器、ID选择器、属性选择器、后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器以及伪类和伪元素的基本用法。这些选择器是构建复杂CSS样式规则的基础，掌握它们将帮助你更好地控制网页的布局和外观。在后续的Vue与TypeScript开发中，你将频繁地使用到这些选择器来实现丰富的用户界面效果。

该分类下的相关小册推荐：

Vue.js从入门到精通(四)

Vue.js从入门到精通(三)

Vue面试指南

Vue.js从入门到精通(一)

TypeScript和Vue从入门到精通(四)

vue项目构建基础入门与实战

VUE组件基础与实战

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(五)

Vue.js从入门到精通(二)

Vue3技术解密

TypeScript和Vue从入门到精通(三)