元素选择器

元素选择器（Element Selector）是 CSS 中最基础、最常用的选择器类型之一，用于根据 HTML 元素的标签名来选择页面中的元素。

1
2
3
4
5
6
7
div {
    background-color: pink;
}

span {
    color: blue;
}

特点

  • 作用范围广：会选中页面中所有该类型的元素。
  • 优先级低：在 CSS 选择器优先级中，元素选择器的权重为 1（比类选择器 .class（10）、ID 选择器 #id（100）等都低）。

群组选择器

群组选择器是将多个选择器合并书写，共享一套样式规则的的语法。目的是为了减少重复代码，提高可维护性。

基本语法

使用英文逗号 , 分隔多个选择器：

1
2
3
selector1, selector2, selector3 {
  /* 共享的样式 */
}

示例

场景：让 h1、h2 和 .title 都使用相同的字体和颜色

1
2
3
4
5
h1, h2, .title {
  font-family: "Arial", sans-serif;
  color: #333;
  margin-bottom: 10px;
}

通用选择器

通用选择器是将所有元素都添加上某些样式规则的语法

基本语法

1
2
3
* {
  color: red;
}

这段css代码将会给所有的元素颜色设置成红色。

类选择器

类选择器是使用的最多的选择器，根据页面元素的class属性来选择元素。

基础语法

1
2
3
.类名 {
	属性: 值;
}

示例

为html元素添加class属性

1
2
3
<p class="title">段落1</p>
<p class="content">段落2</p>
<p class="content">段落3</p>

编写css代码

1
2
3
4
5
6
7
8
9
.title {
    font-size: 24px;
    color: pink;
}

.content {
    font-size: 20px;
    color: #1d0409;
}

观察三个p元素的样式区别。

ID选择器

ID选择器用于根据页面元素的id属性来选择元素。

基础语法

1
2
3
#id {
	属性: 值;
}

用法比较简单，懒得写示例了😂