二、CSS基础选择器¶

TIP

传统CSS2.1选择器和CSS3新增选择器

1、什么是选择器及作用¶

TIP

选择器主要是用来选中我们想要选中的元素，选中后，我们就可以为这个元素添加CSS样式了。

比如：要选中h1标签，为其添加样式

<h1>网站标题</h1>

![[Pasted image 20260220155526.png]]

2、选择器分类¶

注：

h1在这里称为标签选择器，他是根据标签的名字来选中元素。
在css中，选中元素的方式有很多种，这些不同的方式就是不同的选择器。

TIP

CSS选择器非常之多，主要分为：

①、基础选择器

1、标签选择器
2、id选择器
3、class选择器
4、通配符选择器

②、复合选择器

1、交集选择器
2、并集（分组）选择器
3、后代选择器
4、子代选择器
5、相邻兄弟选择器
6、通用兄弟选择器（css3）
7、伪类选择器
8、伪元素选择器
9、属性选择器
10、:first-child 和:last-child 选择器
11、:nth-child(n)和:nth-last-child(n)选择器
12、:nth-of-type(n)和:nth-last-of-type(n)选择器
13、:root 选择器
14、:empty 选择器
15、:only-child 选择器
......等几十种。

我们先来了解基础选择器，往后有了更多基础后，再来了解复合选择器

3、标签选择器¶

TIP

标签选择器称之为：元素选择器、类型选择器

他直接使用元素的标签名当做选择器，将选择页面上所有该种标签
标签选择器将选择页面上所有该种标签，无论标签所处位置的深浅

语法

element {
  /* ....样式声明..... */
}

p {
}
div {
}
h3 {
}
...

代码演示

<html>
<style>
/* 选中当前页面上所有的h2标签和p标签 */
h2 {
  color: red; /* 文字颜色:红色 */
}
p {
  background-color: blue; /* 背景:蓝色 */
}
</style>
<body>
<h2>文字颜色:红色</h2>
<p>背景蓝色</p>
</body>
</html>

渲染效果： ![[Pasted image 20260220155819.png]]

TIP

标签选择器的作用：标签选择器的“覆盖面”非常大，通常用于标签样式的初始化

ul {
  /*去掉所有无序列表的小圆点*/
  list-style: none;
}
a {
  /*去掉所有超级链接的下划线*/
  text-decoration: none;
}

4、id选择器¶

TIP

id选择器是使用HTML元素的id属性来选择特定元素

元素的id在页面中是唯一的，因此id选择器用于选择一个唯一的元素
要选择具有特定id的元素，请写一个井号（#），后跟该元素的id。

语法

CSS

#id {
  /*...样式声明...*/ 
}

#box {
}
#container {
}
#top {
}

案例

CSS

#top {
  color: red;
}
#header {
  color: blue;
}

HTML

<body>
  <div id="top">top为红色</div>
  <div id="header">header为蓝色</div>
</body>

渲染效果： ![[Pasted image 20260220160012.png]]

5、class选择器¶

TIP

HTML元素以class属性来设置
CSS中class选择器以“.”+class命名来定义。

语法

CSS

.class {
  /*...样式声明...*/ 
}

.box {
}
.item {
}

案例

<html>
<style type="text/css">
.box {
  font-size: 20px; /* 字体大小 20 像素*/
  color: red; /* 文字颜色: 红色；*/
}
</style>
<body>
  <div class="box">文本内容</div>
</body>

5.1、class选择器用法¶

一个元素可以有多个class名，类命名间用空格隔开

<div class="box1 box2"></div>

**注意事项

多个标签可以定义相同的类名（注意和 id 选择器做区分：元素的 id 是唯一的，一个页面相同的 id 只有一个）

<div class='box1 box2'></div>
<p class='box1'></p>
<h3 class='box2'></h3>

不同标签的相同样式放在同一类名中，可以减少代码量

<html>
<style>
.box {
  width: 100px;
  height: 100px;
}
.bg-color1 {
  background-color: red;
}
.bg-color2 {
  background-color: yellow;
}
</style>
<body>
  <div class="box bg-color1">box bg-color1</div>
  <div class="box bg-color2">box bg-color2</div>
</body>
</html>

渲染效果： ![[Pasted image 20260220160236.png]]

5.2、原子类¶

TIP

在网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等样式都设置为单独的类。

HTML标签就可以“按需选择”它的类名，这样能够快速为元素添加常见的样式。

应用场景：组件化开发，目前比较经典的CSS框架是Tailwindcss。

<style>
.fs12 { font-size: 12px; }
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }
.fs18 { font-size: 18px; }
.fs20 { font-size: 20px; }
.fs22 { font-size: 22px; }

.color-red { color: red; }
.color-black { color: black; }
.color-green { color: green; }
.color-blue { color: blue; }
</style>

<body>
<h2 class="fs22 color-red">原子类</h2>
<p class="fs18 color-green">
    在网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等样式都设置为单独的类。
</p>
<p class="fs14 color-blue">
    HTML标签就可以“按需选择”它的类名，这样能够快速为元素添加常见的样式。
</p>
</body>

渲染效果： ![[Pasted image 20260220160416.png]]

5.3、id 和 class 的命名规则¶

只能由字母、数字、下划线、短横线构成

<div id='a'></div>
<div id='a1'></div>
<div id='a-b_c'></div>
<!-- 这些命名都可以，但都不是好的命名，因为通过名字没法知道这个div里的内容 -->

不能以数字开头

<div id='1a'></div> <!-- 这个是错误的命名 -->

字母区分大小写，但习惯上一般为小写字母

<style>
.box {
  color: red;
}
.Box {
  font-size: 30px; /* 这个样式并不会作用于 class='box' 的标签上 */
}
</style>
<body>
<div class="box">字体为红色</div>
</body>

渲染效果： ![[Pasted image 20260220160532.png]]

名字最好见名知意，多个英文单词可以用-隔开

<div class="menu"></div>
<div class="sidebar"></div>
<div id="top-nav"></div>

命名规则和规范

详细查阅，CSS样式命名规则和规范

6、* 通配符选择器¶

TIP

- 代表页面当中所有的元素
基本不用，对性能消耗过大

CSS

* {
  color: red;
} /* 页面当中所有元素的字体颜色为红色 */

7、基础选择器的权重优先级¶

权重从高到低依次是：行内样式 > id选择器 > 类选择器 > 标签选择器 > * 通配符

<html>
<style>
* {
  color: red; /* 红色 */
}
div {
  color: skyblue; /* 天蓝色 */
}
.box {
  color: green; /* 绿色 */
}
#box {
  color: blue; /* 蓝色 */
}
</style>
<body>
<div id="box" class="box">id与class</div>
<div class="box">class</div>
<div>div本身</div>
<p>p</p>
</body>
</html>

渲染效果： ![[Pasted image 20260220160756.png]]

如果选择器级别相同，后面的会覆盖前面的

<html>
<style>
  .wrap {
    background: red;
  }
  .wrap {
    background: yellow;
  }
</style>
<body>
  <div class="wrap">wrap</div>
</body>
</html>

渲染效果： ![[Pasted image 20260220160902.png]]

8、测试题¶

TIP

以下最终显示的 CSS 样式是？

做题步骤：

首先，找到控制当前元素的所有 CSS 选择器。
然后，从这些选择器中，找到优先级最高的选择器，最终显示的样式为这些选择器控制的样式。
如果多个选择器的优先级一样，则按就近原则来判断，离元素最近的选择器样式最终为生效样式。

/* basic.css 文件 */
#box {
  color: orange; /* 橘色 */
}
.col1 {
  color: pink; /* 粉色 */
}

<html>
<head>
<link rel="stylesheet" href="basic.css">
<style>
p {
  color: blue; /* 蓝色 */
}
.col1 {
  color: red; /* 红色 */
}
.col2 {
  color: green; /* 绿色 */
}
</style>
<body>
  <div id="box" class="col1">1</div>
  <p>2</p>
  <p class="col2 col1">3</p>
  <p style="color: red" id="box">4</p>
</body>
</html>

渲染效果： ![[Pasted image 20260220161018.png]]

9、总结：CSS基础选择器¶

选择器	说明	实例	优先级排名
id选择器	id是唯一的，一个页面相同的 id 只能有一个	`<div id="box"></div>`	1
class选择器	一个标签可以有多个 class 类，一个类可以应用多个标签	`<div class="box"></div>`	2
标签选择器	通过标签名来选中元素，不管元素多深，都能选择到	`div { ... }`	3
*通配符选择器	选择页面中所有元素，几乎不用	`* { ... }`	4

10、后代选择器¶

TIP

为什么我要在这里讲后代选择器呢？是因为后面的作业要用到

在 CSS 中，使用空格表示“后代”
后代并不一定是“儿子”，子孙都可以
后代选择器可以有很多空格，隔开好几代

语法

CSS

element element {
  /* ...样式声明.....*/
}

div p span {}
div p {}
div span {}

**案例

<html>
<style>
.box h3 span {
  color: tomato;
}
.box p {
  color: #666;
}
.box p span {
  color: tomato;
}
</style>
<body>
<div class="box">
  <h3>什么是CSS选择器？</h3>
  <p>
    <span>选择器：</span>
    主要是用来选中我们想要选中的元素，选中后，我们就可以为这个元素添加CSS样式了。
  </p>
</div>
</body>
</html>

渲染效果：

![[Pasted image 20260220161243.png]]