CSS 选择器用于选择要设置样式的内容。选择器是 CSS 规则集的一部分。CSS 选择器根据其 id、类、类型、属性等选择 HTML 元素。
CSS 中有几种不同类型的选择器。
CSS 元素选择器
CSS ID 选择器
CSS 类选择器
CSS 通用选择器
CSS 组选择器
元素选择器按名称选择 HTML 元素。
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>这种样式将应用于每个段落。</p>
<p id="para1">我也是！</p>
<p>And me!</p>
</body>
</html>
id 选择器选择 HTML 元素的 id 属性来选择特定元素。一个 id 在页面内始终是唯一的，因此选择它是为了选择一个唯一的元素。
它用哈希字符 (#) 编写，后跟元素的 id。
让我们举一个id为“para1”的例子。
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">你好Rocschool.com </p>
<p>本段不受影响。</p>
</body>
</html>
类选择器选择具有特定类属性的 HTML 元素。它与句点字符一起使用。（句号）后跟类名。
让我们以“中心”类为例。
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">此标题为蓝色且居中对齐。</h1>
<p class="center">这一段是蓝色的，居中对齐。</p>
</body>
</html>
如果你想指定只影响一个特定的 HTML 元素，那么你应该使用元素名称和类选择器。
让我们看一个例子。
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这一段是蓝色的，居中对齐。</p>
</body>
</html>
通用选择器用作通配符。它选择页面上的所有元素。
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>这是标题</h2>
<p>种样式将应用于每个段落。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
</body>
</html>
分组选择器用于选择具有相同样式定义的所有元素。
分组选择器用于最小化代码。逗号用于分隔分组中的每个选择器。
让我们看看没有组选择器的 CSS 代码。
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}
如您所见，您需要为所有元素定义 CSS 属性。它可以按以下方式分组：
h1,h2,p {
text-align: center;
color: blue;
}
让我们看看 CSS 组选择器的完整示例。
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>你好 Rocschool.com </h1>
<h2>你好 Rocschool.com（小字体）</h2>
<p>这是一个段落。</p>
</body>
</html>