CSS - 3、基本选择器
在CSS中，选择器是用于选择HTML元素并为其应用样式的工具。CSS基本选择器主要包括以下几种：元素选择器、类选择器、ID选择器、属性选择器和伪类选择器。这些选择器是CSS的基础，掌握它们的使用方法可以帮助你精确地控制页面的样式。
1. 元素选择器（Type Selector）
元素选择器是基于HTML元素的标签名来选择元素的。它会选择文档中所有指定类型的元素。
语法：
元素名 {
/* CSS样式规则 */
}
示例：
p {
color: blue;
font-size: 16px;
}
div {
background-color: #f0f0f0;
padding: 10px;
}
特点：
- 作用范围广：会选择页面中所有指定类型的元素。
- 优先级较低：在选择器中，元素选择器的优先级是最低的（除了伪元素选择器）。
适用场景：
- 为页面中所有同类型的元素统一设置样式。
2. 类选择器（Class Selector）
类选择器是基于HTML元素的class属性来选择元素的。它允许你为具有相同class的元素定义统一的样式。
语法：
.类名 {
/* CSS样式规则 */
}
示例：
<div class="box">这是一个盒子</div>
<p class="box">这是一段文本</p>
.box {
border: 1px solid black;
padding: 10px;
margin: 5px;
}
特点：
- 可复用性强：一个
class可以应用于多个元素。 - 优先级较高：比元素选择器优先级高，但低于ID选择器。
- 支持多类名：一个元素可以同时拥有多个
class，通过空格分隔。
适用场景：
- 为一组元素设置相同的样式。
- 需要复用样式时。
3. ID选择器（ID Selector）
ID选择器是基于HTML元素的id属性来选择元素的。由于id在页面中必须是唯一的，因此ID选择器只能选择一个元素。
语法：
#id名 {
/* CSS样式规则 */
}
示例：
<div id="main-content">这是主要内容</div>
#main-content {
font-size: 20px;
color: green;
}
特点：
- 唯一性：一个页面中
id必须唯一。 - 优先级最高：在选择器中，ID选择器的优先级最高（除了
!important和内联样式）。 - 适用于特定元素：通常用于选择页面中唯一的元素。
适用场景：
- 为页面中唯一的元素设置样式。
- 在JavaScript中通过
id精确操作元素。
4. 属性选择器（Attribute Selector）
属性选择器是基于HTML元素的属性及其值来选择元素的。它提供了非常灵活的选择方式。
语法：
[属性名] {
/* CSS样式规则 */
}
[属性名="属性值"] {
/* CSS样式规则 */
}
[属性名~="属性值"] {
/* CSS样式规则 */
}
[属性名|="属性值"] {
/* CSS样式规则 */
}
示例：
<div title="tooltip">鼠标悬停提示</div>
<a href="https://example.com">链接</a>
[title] {
color: red;
}
[href] {
text-decoration: none;
}
[href*="https"] {
color: blue;
}
特点：
- 灵活性高：可以根据属性的存在、属性值或属性值的模式来选择元素。
- 优先级较高：与类选择器相同。
适用场景：
- 选择具有特定属性的元素。
- 根据属性值的模式选择元素（如
href以https开头的链接）。
5. 伪类选择器（Pseudo-class Selector）
伪类选择器用于选择处于特定状态的元素，例如鼠标悬停、焦点状态或元素的特定顺序等。伪类选择器以冒号:开头。
语法：
选择器:伪类 {
/* CSS样式规则 */
}
常见伪类选择器：
:hover：鼠标悬停时的状态。:focus：元素获得焦点时的状态。:active：元素被激活（点击）时的状态。:first-child：选择父元素的第一个子元素。:last-child：选择父元素的最后一个子元素。:nth-child(n)：选择父元素的第n个子元素。
示例：
<a href="#">链接</a>
<div>
<p>第一个段落</p>
<p>第二个段落</p>
</div>
a:hover {
color: red;
}
a:focus {
outline: 2px solid blue;
}
p:first-child {
font-weight: bold;
}
特点：
- 动态性：伪类选择器可以根据元素的状态动态改变样式。
- 优先级较高：与类选择器相同。
适用场景：
- 为元素的特定状态（如悬停、焦点）设置样式。
- 选择元素的特定顺序（如第一个子元素）。
6. 组合选择器
除了单独使用选择器外，还可以通过组合选择器来更精确地选择元素。常见的组合选择器包括：
- 后代选择器：
A B，选择A元素内部的所有B元素。 - 子代选择器：
A > B，选择A元素的直接子元素B。 - 相邻兄弟选择器：
A + B，选择紧接在A元素之后的B元素。 - 通用兄弟选择器：
A ~ B，选择A元素之后的所有B元素。
示例：
<div class="container">
<p>第一个段落</p>
<p>第二个段落</p>
</div>
.container p {
color: blue; /* 后代选择器 */
}
.container > p {
font-size: 16px; /* 子代选择器 */
}
p + p {
margin-top: 20px; /* 相邻兄弟选择器 */
}
特点：
- 精确性高：可以通过组合选择器精确地选择目标元素。
- 优先级规则：组合选择器的优先级取决于其组成部分（如ID选择器优先级高于类选择器）。
适用场景：
- 为特定结构的元素设置样式。
- 避免样式冲突。
7. 总结
CSS基本选择器是CSS的核心工具，每种选择器都有其独特的用途和优先级规则。
| 选择器类型 | 语法 | 优先级 | 特点 |
|---|---|---|---|
| 元素选择器 | 元素名 |
最低 | 选择所有指定类型的元素，作用范围广。 |
| 类选择器 | .类名 |
中等 | 选择所有指定class的元素，可复用性强。 |
| ID选择器 | #id名 |
最高 | 选择具有指定id的元素，唯一性。 |
| 属性选择器 | [属性名]、[属性名="值"] |
中等 | 选择具有特定属性或属性值的元素，灵活性高。 |
| 伪类选择器 | 选择器:伪类 |
中等 | 选择处于特定状态的元素，动态性强。 |
| 组合选择器 | A B、A > B、A + B、A ~ B |
根据组成部分决定 | 通过组合选择器精确选择目标元素。 |
CSS样式规则的优先级总结
当多个样式规则冲突时，CSS会按照以下顺序确定最终生效的样式：
-
来源优先级：
- 内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式
-
选择器优先级：
- 内联样式 > ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素
-
规则的顺序：
- 如果多个规则的选择器优先级相同，则后定义的规则会覆盖先定义的规则（即“后写覆盖先写”）。
-
!important声明：- 如果样式规则中使用了
!important，则该规则的优先级会高于其他未使用!important的规则，即使它的选择器优先级较低。但尽量避免使用!important，因为它会破坏CSS的自然层叠规则。
- 如果样式规则中使用了
示例：
假设有以下HTML和CSS代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<style>
.box {
color: green; /* 内部样式表 */
}
</style>
</head>
<body>
<div class="box" style="color: red;">这是一段文本</div>
</body>
</html>
/* styles.css */
.box {
color: blue; /* 外部样式表 */
}
优先级分析：
- 外部样式表：
color: blue;（优先级最低） - 内部样式表：
color: green;（优先级高于外部样式表） - 内联样式：
color: red;（优先级最高）
最终，<div>的字体颜色会是红色，因为内联样式的优先级最高。
补充说明
-
选择器优先级的计算：
- 如果选择器中包含
!important，则该规则的优先级最高。 - 否则，优先级由选择器的类型决定：
- 内联样式：
style属性 - ID选择器：
#id - 类选择器/属性选择器/伪类：
.class、[attribute]、:hover - 元素选择器/伪元素：
div、::before
- 内联样式：
- 如果多个规则的选择器优先级相同，则后定义的规则会覆盖先定义的规则。
- 如果选择器中包含
-
特殊情况：
!important：虽然优先级最高，但应尽量避免使用，因为它会破坏样式的自然层叠规则，导致样式难以维护。
浙公网安备 33010602011771号