上查看所有课程
CSS 选择器用于选择要通过 CSS 设置样式的 HTML 元素。例如，
h1 {
color: red;
}浏览器输出
这里，h1 是选择器，它选择文档中所有的 h1 元素，并将其 color 更改为 red。
选择器类型
CSS 中有以下几种不同类型的选择器。
- 元素选择器
- ID 选择器
- 类选择器
- 通用选择器
- 分组选择器
- 属性选择器
现在，让我们详细了解它们。
元素选择器
元素选择器选择 HTML 元素（p、div、h1 等）并对其应用 CSS。例如，
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS selectors</title>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>h1 {
color: red;
}
p {
color: orange;
}浏览器输出
在上面的示例中，元素选择器
h1选择所有h1元素并将其color设置为redp选择所有p元素并将其color设置为orange
注意：元素选择器也称为标签选择器，因为它根据 HTML 元素的标签名称进行选择。
ID 选择器
ID 选择器选择具有唯一标识符 (id) 的 HTML 元素并对其添加 CSS。
ID 选择器使用哈希 (#) 字符指定，后跟元素的 id。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS selectors</title>
</head>
<body>
<p>First Paragraph</p>
<p id="second-paragraph">Second Paragraph</p>
<p>Third Paragraph</p>
</body>
</html>#second-paragraph {
color: red;
}浏览器输出
这里，
#- id 选择器second-paragraph- id 的名称
ID 选择器 #second-paragraph 选择第二个段落并将文本颜色设置为 red。
注意：ID 选择器是唯一的，并且只选择一个唯一的元素。
类选择器
类选择器使用 class 属性选择 HTML 元素并对其应用 CSS。
类选择器使用句点 (.) 字符指定，后跟类名。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS selectors</title>
</head>
<body>
<h2>Section First</h2>
<p class="first-paragraph">This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<h2>Section Second</h2>
<p class="first-paragraph">This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>.first-paragraph {
background-color: orange;
}浏览器输出
这里，
.- 类选择器first-paragraph- 类名
类选择器 .first-paragraph 选择所有具有 first-paragraph 类名的段落，并将其 background-color 设置为 orange。
通用选择器
通用选择器选择页面上的每一个 HTML 元素。它使用星号 (*) 字符编写。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS selectors</title>
</head>
<body>
<h1>Heading</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</body>
</html>* {
color: red;
}浏览器输出
在上面的示例中，通用选择器 * 选择所有 HTML 元素并应用 red 颜色。
注意：通用选择器也称为通配符选择器。
#group-selector 分组选择器
分组选择器允许您选择多个元素并对它们应用相同的样式。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS selectors</title>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>h1, p {
color: blue;
}浏览器输出
在这里，代码对所有 <h1> 和 <p> 元素应用 CSS 样式。请注意，我们使用了 , 来分隔 HTML 元素。
属性选择器
属性选择器根据特定的属性值选择元素。
属性选择器的语法是
Element[attribute]让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS selectors</title>
</head>
<body>
<p class="first">This is a first paragraph.</p>
<p>This paragraph doesn't have a class attribute.</p>
<p class="third">This is a third paragraph.</p>
<p class="fourth">This is a fourth paragraph.</p>
</body>
</html>p[class] {
background-color: orange;
}
p[class="third"] {
color: blue;
}浏览器输出
在上面的示例中，属性选择器
p[class]选择所有具有class属性的p元素，并将其背景颜色设置为red。p[class="third"]选择所有具有.third类名的p元素，并将其颜色设置为blue。
注意：此选择器仅在指定的给定属性存在时才选择元素。