← 返回首页

第2章: CSS 选择器

学习如何精确选择和定位 HTML 元素

什么是选择器？

选择器用于选择要应用样式的 HTML 元素。掌握选择器是使用 CSS 的基础。

基本选择器

1. 元素选择器（标签选择器）

选择所有指定类型的元素。

p {
    color: blue;
}

h1 {
    font-size: 32px;
}

2. 类选择器

选择具有指定 class 属性的元素，以 . 开头。

.highlight {
    background-color: yellow;
}

.text-large {
    font-size: 20px;
}

3. ID 选择器

选择具有指定 id 属性的元素，以 # 开头。每个 ID 在页面中应该是唯一的。

#header {
    background-color: navy;
}

#main-content {
    width: 80%;
}

4. 通配符选择器

选择页面中的所有元素。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

基本选择器演示

元素选择器：所有 p 标签都是蓝色

类选择器：这段文字有黄色背景

ID 选择器：这段文字是红色加粗

组合选择器

1. 群组选择器

同时选择多个元素，用逗号分隔。

h1, h2, h3 {
    color: navy;
    font-family: Arial;
}

2. 后代选择器

选择某元素内部的所有指定元素（用空格分隔）。

div p {
    color: green;
}

.container .text {
    font-size: 16px;
}

3. 子选择器

只选择直接子元素（用 > 分隔）。

div > p {
    color: red;
}

ul > li {
    list-style: none;
}

4. 相邻兄弟选择器

选择紧接在另一元素后的元素（用 + 分隔）。

h2 + p {
    font-weight: bold;
}

5. 通用兄弟选择器

选择某元素后面的所有兄弟元素（用 ~ 分隔）。

h2 ~ p {
    color: gray;
}

组合选择器演示

群组选择器：h3 和 h4 都是深蓝色

这也是深蓝色

后代选择器：container 内的 p 是绿色

嵌套更深的 p 也是绿色

子选择器：直接子元素 span 是红色加粗

这个 span 不是直接子元素，不受影响

属性选择器

根据元素的属性和属性值选择元素。

选择器	说明	示例
[attr]	有该属性的元素	[title] { color: blue; }
[attr=value]	属性值等于 value	[type="text"] { border: 1px solid; }
[attr^=value]	属性值以 value 开头	[href^="https"] { color: green; }
[attr$=value]	属性值以 value 结尾	[src$=".jpg"] { border: 2px solid; }
[attr*=value]	属性值包含 value	[class*="btn"] { padding: 10px; }

/* 选择所有有 title 属性的元素 */
[title] {
    cursor: help;
}

/* 选择 type="text" 的 input */
input[type="text"] {
    border: 1px solid #ccc;
}

/* 选择 href 以 https 开头的链接 */
a[href^="https"] {
    color: green;
}

属性选择器演示

鼠标悬停查看提示（有 title 属性）

HTTPS 链接（绿色） | 锚点链接（橙色）

伪类选择器

伪类用于定义元素的特殊状态。

常用伪类

伪类	说明
:hover	鼠标悬停时
:active	元素被激活时（点击时）
:focus	元素获得焦点时
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(n)	第 n 个子元素
:not(selector)	不匹配选择器的元素

/* 鼠标悬停效果 */
a:hover {
    color: red;
    text-decoration: underline;
}

/* 输入框获得焦点时 */
input:focus {
    border-color: blue;
    outline: none;
}

/* 第一个子元素 */
li:first-child {
    font-weight: bold;
}

/* 偶数行 */
tr:nth-child(even) {
    background-color: #f0f0f0;
}

伪类选择器演示

鼠标悬停这个链接（:hover）

列表伪类示例：

第一项（加粗蓝色）
第二项（偶数行有背景）
第三项
第四项（偶数行有背景）
最后一项（斜体紫色）

🎯 互动练习：选择器练习

选择不同的选择器类型，查看效果：

这是第一个段落

这是第二个段落（有类）

这是第三个段落（有ID）

这是容器内的段落

本章小结

基本选择器：元素、类（.）、ID（#）、通配符（*）
组合选择器：群组（,）、后代（空格）、子（>）、兄弟（+、~）
属性选择器：[attr]、[attr=value]、[attr^=value] 等
伪类选择器：:hover、:focus、:first-child、:nth-child() 等
选择器可以组合使用，实现精确选择