---
title: "IT课程 CSS基础 020_选择器"
date: 2024-01-26T22:30:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "hello css", "css基础", "css选择器"]
categories: ["学习", "CSS基础"]
canonical: https://www.zhaojian.net/it-course-css-020/
author: 赵健
---

### 选择器

选择器用于选择文档中需要样式化的元素，通过不同的选择模式，告诉浏览器哪些元素应用哪些样式。

##### ID选择器（#）
通过元素的唯一ID来选择元素。ID选择器应该确保在文档中是唯一的，不应重复使用相同的ID。

示例：

```css
#myID {
	/* 样式规则 */
}
```

##### 类选择器（.）
通过元素的类名选择元素。类选择器可以用于多个元素，同一个元素可以拥有多个类。

示例：

```css
.myClass {
	/* 样式规则 */
}
```

##### 元素选择器（p、h1）
通过HTML元素的名称选择元素。元素选择器会选择文档中所有匹配的元素。

示例：

```css
p {
	/* 样式规则 */
}
```

##### 通用选择器（`*`）
选择文档中的所有元素。通用选择器应该谨慎使用，因为会匹配所有元素，影响性能。

示例：

```css
* {
	/* 样式规则 */
}
```

##### 属性选择器（`[type="text"]`）
通过元素的属性值选择元素。属性选择器可以根据属性值的不同选择元素。

示例：

```css
input[type="text"] {
	/* 样式规则 */
}
```

##### 伪类选择器
选择元素的特殊状态或位置。伪类选择器用于选择元素的交互状态，如悬停、访问等。

示例：

```css
a:hover {
	/* 样式规则 */
}
```

##### 伪元素选择器
选择元素的特殊部分。伪元素选择器用于选择元素的虚拟部分，如首行、首字母等。

示例：

```css
p::first-line {
	/* 样式规则 */ 
}
```

##### 子元素选择器
选择某个元素的直接子元素。子元素选择器只选择直接子元素，不包括后代。

示例：

```css
ul > li {
	/* 样式规则 */
}
```

##### 通用兄弟选择器
选择和指定元素有相同父元素的所有兄弟元素。通用兄弟选择器用于选择所有在指定元素后面的兄弟元素，不要求紧邻。

示例：

```css
h2 ~ p {
	/* 样式规则 */
}
```

##### 相邻兄弟选择器
选择紧接在指定元素后面的兄弟元素。相邻兄弟选择器用于选择紧接在指定元素后面的兄弟元素。

示例：

```css
h2 + p {
	/* 样式规则 */
}
```

##### 后代选择器
选择某个元素下的所有后代元素。后代选择器会选择指定元素下的所有后代，包括嵌套层次深的元素。

示例：

```css
div p {
	/* 样式规则 */
}
```

##### 并集选择器（,）
将多个选择器组合在一起，选择所有匹配任一选择器的元素。并集选择器用于同时选择多个不同类型的元素，并应用相同的样式规则。

示例：

```css
h1, h2, h3 {
	/* 样式规则 */
}
```

##### 选择器列表
将多个选择器按照优先级顺序列举，选择最匹配的一个。选择器列表允许按照不同的选择器组合选择多个元素，以满足不同条件的样式需求。

示例：

```css
div p,
.myClass,
#myID {
	/* 样式规则 */
}
```

##### 选择器命名规则

- 选择器的名称必须是字母数字、下划线或连字符组成的字符串。
- 选择器的名称必须以字母或下划线开头。
- 选择器的名称不能以数字开头。
- 选择器的名称不能包含空格。

  **建议：**
  
- **使用有意义的名字：** 选择器的名字应该能够清晰地反映出所选择元素的作用或用途。
- **遵循命名约定：** 使用一致的命名约定，如驼峰式命名或短横线连接命名，以提高代码的一致性。
- **避免使用无意义的缩写：** 避免使用过于简短或无意义的缩写，使得其他开发者也能理解选择器的含义。
- **遵循语义化：** 使用具有语义化的选择器，以提高代码的可读性和维护性。