2. CSS选择器与伪类

2.1 基本选择器回顾

在开始介绍CSS3选择器之前，我们先回顾一下CSS的基本选择器。这些选择器是所有CSS开发的基础。

2.1.1 元素选择器

元素选择器用于选中指定类型的HTML元素。

/* 选中所有的<p>元素 */
p {
    color: blue;
}

2.1.2 类选择器

类选择器用于选中拥有特定类名的元素。类选择器以句点（.）开头。

/* 选中所有类名为"example"的元素 */
.example {
    color: red;
}

2.1.3 ID选择器

ID选择器用于选中拥有特定ID的元素。ID选择器以井号（#）开头。

/* 选中ID为"header"的元素 */
#header {
    background-color: green;
}

2.1.4 后代选择器

后代选择器用于选中某个元素的所有后代元素。

/* 选中所有在<div>内的<p>元素 */
div p {
    color: purple;
}

2.1.5 组选择器

组选择器用于选中多个选择器对应的元素。

/* 选中所有的<h1>和<p>元素 */
h1, p {
    margin: 0;
}

2.2 CSS3新增选择器

CSS3引入了许多新选择器，使得选择元素更加精确和灵活。

2.2.1 属性选择器

属性选择器允许你根据元素的属性及其值来选中元素。

/* 选中所有属性包含"example"的元素 */
a[href*="example"] {
    color: red;
}

/* 选中所有属性以"example"结尾的元素 */
a[href$="example"] {
    color: blue;
}

/* 选中所有属性以"example"开头的元素 */
a[href^="example"] {
    color: green;
}

2.2.2 目标伪类选择器

:target 选择器用于选中当前活动的锚点目标。

/* 当链接目标被选中时改变其样式 */
:target {
    background-color: yellow;
}

2.2.3 :nth-child() 选择器

:nth-child() 选择器允许开发者选中特定的子元素。

/* 选中每个第二个子元素 */
li:nth-child(2n) {
    background-color: lightgray;
}

/* 选中每个第三个同类型的子元素 */
li:nth-of-type(3n) {
    color: blue;
}

2.3 伪类与伪元素

伪类和伪元素是CSS的重要特性，用于选择不可见的元素或元素的某一部分。

2.3.1 伪类

伪类用于选中元素的特定状态。

/* 选中鼠标悬停时的元素 */
a:hover {
    color: orange;
}

/* 选中获得焦点的输入框 */
input:focus {
    border-color: blue;
}

2.3.2 伪元素

伪元素用于选择元素的一部分，如首字母或内容前后的位置。

/* 选中<p>元素的首字母 */
p::first-letter {
    font-size: 2em;
    color: red;
}

/* 在每个<p>元素的内容前插入内容 */
p::before {
    content: "Note: ";
    font-weight: bold;
}

2.4 选择器的优先级与最佳实践

选择器的优先级决定了当多个选择器匹配同一个元素时，哪个选择器的样式会被应用。了解选择器的优先级对编写高效的CSS代码非常重要。

2.4.1 选择器优先级规则

优先级由四个部分组成，从高到低依次是：内联样式、ID选择器、类选择器/属性选择器/伪类、元素选择器/伪元素。

/* 内联样式优先级最高 */
<style>
    <div style="color: red;">内联样式</div>
</style>

/* ID选择器 */
#id {
    color: blue; /* 优先级为 0, 1, 0, 0 */
}

/* 类选择器 */
.class {
    color: green; /* 优先级为 0, 0, 1, 0 */
}

/* 元素选择器 */
div {
    color: yellow; /* 优先级为 0, 0, 0, 1 */
}

2.4.2 注意事项

1. 避免过度使用ID选择器：ID选择器优先级很高，不易覆盖，尽量使用类选择器。
2. 结构清晰：确保CSS代码结构清晰，选择器简洁易懂。
3. 使用后代选择器谨慎：后代选择器的优先级较高，过多使用会导致样式难以维护。
4. 利用浏览器开发工具：使用浏览器开发工具（如Chrome DevTools）来调试和查看选择器优先级。

2.5 选择器的优先级与最佳实践

选择器的优先级决定了当多个选择器匹配同一个元素时，哪个选择器的样式会被应用。了解选择器的优先级对编写高效的CSS代码非常重要。

2.5.1 选择器优先级规则

优先级由四个部分组成，从高到低依次是：内联样式、ID选择器、类选择器/属性选择器/伪类、元素选择器/伪元素。

/* 内联样式优先级最高 */
<style>
    <div style="color: red;">内联样式</div>
</style>

/* ID选择器 */
#id {
    color: blue; /* 优先级为 0, 1, 0, 0 */
}

/* 类选择器 */
.class {
    color: green; /* 优先级为 0, 0, 1, 0 */
}

/* 元素选择器 */
div {
    color: yellow; /* 优先级为 0, 0, 0, 1 */
}

2.5.2 注意事项

1. 避免过度使用ID选择器：ID选择器优先级很高，不易覆盖，尽量使用类选择器。
2. 结构清晰：确保CSS代码结构清晰，选择器简洁易懂。
3. 使用后代选择器谨慎：后代选择器的优先级较高，过多使用会导致样式难以维护。
4. 利用浏览器开发工具：使用浏览器开发工具（如Chrome DevTools）来调试和查看选择器优先级。