我们可以将 CSS 选择器分为五类:
- 简单选择器(根据名称、id、类选择元素)
- 组合器选择器(选择 元素基于它们之间的特定关系)
- 伪类选择器(根据特定状态选择元素)
- 伪元素选择器(选择 并设置元素的一部分样式)
- 属性选择器(根据 属性或属性值)
CSS 元素选择器
p {
text-align: center;
color: red;
}
CSS id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的,因此 id 选择器 习惯于 选择一个独特的元素!要选择具有特定 id 的元素,请编写哈希 (#) 字符,后跟元素的ID。注意:ID 名称不能以数字开头!
#para1 {
text-align: center;
color: red;
}
CSS 类选择器
类选择器选择具有特定类属性的 HTML 元素。要选择具有特定类的元素,请编写句点 (.) 字符,后跟类名。
所有带有class=“center”的HTML元素都将是红色的,并且居中对齐:
.center {
text-align: center;
color: red;
}
只有 class=“center” 的 <p> 元素将是 红色和居中对齐:
p.center {
text-align: center;
color: red;
}
网页元素 也可以指多个类。在下面的例子里,<p> 元素将根据 class=“center” 设置样式 和 to class=“large”:
CSS 通用选择器
通用选择器 (*) 选择所有 HTML 元素。
* {
text-align: center;
color: blue;
}
CSS 分组选择器
分组选择器选择具有相同样式的所有 HTML 元素 定义。查看以下 CSS 代码(h1、h2 和 p 元素具有相同的 样式定义):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
最好对选择器进行分组,以最小化代码。要对选择器进行分组,请用逗号分隔每个选择器。
在这个例子中,我们从上面的代码中对选择器进行了分组:
h1, h2, p {
text-align: center;
color: red;
}
网友评论