前言#

CSS3是前端简单又不简单的知识内容，简单的是语法，不简单的是其选择器，属性和属性值非常多，学好CSS3是网页布局中尤为关键的一步，页面美观，有没有样式冲突Bug，都看CSS3的基础知识是否牢固；

CSS3可以分为以下几个阶段：基础概念、选择器、文本属性、盒模型、浮动、定位、边框、圆角、背景渐变、2D与3D转换，过渡与动画，当然还有后续的Flex + Grid + 响应式+单位与尺寸，这些在移动Web端讲解。

学习CSS3不应该背属性和属性值，应该先学结构->再学布局->再学视觉->最后学增强效果，现在学习的就是知识内容，先把基础该学的学完，在深入研究自学，完全不看视频，编写样式，提升更快

学习目标#

本文只学习CSS3的基础概念和选择器部分，熟练掌握选择器有哪些，选择器在日常开发中一般不会用到很复杂，但是至少遇到要看得懂

CSS3基础概念#

简介：CSS（cascading style sheet，层叠式样式表）是用来给 HTML标签添加样式的语言；CSS3是CSS的最新版本，增加了大量的样式、动画、3D特 效和移动端特性等

CSS使样式和结构分离：CSS使样式和结构分离，样式和结构不用“杂糅着写”，而 是彼此分开：HTML就负责结构，CSS负责样式；HTML和CSS怎么结合呢？“选择器”就是两者的纽带

CSS的本质：CSS就是样式的“清单”，要书写合适的选择器，然后把指 定元素的样式“一条一条罗列”出来；CSS没有加减乘除、与或非、循环、选择、判断，CSS不是 “编程” ，就是简单直接的罗列样式；背诵CSS属性是非常重要的，属性背诵熟练程度决定了做网 页的速度

CSS的书写位置：内嵌式、外链式、导入式

基本语法： 选择器，大括号，KV值；最后一条样式可以不书写分号；可以没有换行

标签选择器#

• 标签选择器也称元素选择器、类型选择器，它直接使用元素 的标签名当做选择器，将选择页面上所有该种标签
• 标签选择器将选择页面上所有该种标签，无论这个标签所处 位置的深浅
• 标签选择器“覆盖面”非常大，所以通常用于标签的初始化

示例：

1
<style>
2
    h1 {
3
        color: red;
4
    }
5
</style>
6
<h1>我是h1</h1>
7
<div>
8
    <h1>我是div下的h1</h1>
9
</div>

页面上所有的h1标签字体都会变成红色，所以说“覆盖面”非常大，为什么说初始化呢，因为如果写div h1 这样的选择器，字体就可以自定义颜色，而不是红色，新定义的覆盖之前的

id选择器#

• 标签可以有id属性，是这个标签的唯一标识，同一个页面上不能有相同id的标签
• id的名称只能由字母、数字、下划线、短横构成，且不能以 数字开头，字母区分大小写，但习惯上一般为小写字母
• CSS选择器可以使用井号#前缀，选择指定id的标签

示例：

1
<style>
2
    #_para1 {
3
        color: red;
4
    }
5

6
</style>
7
<h1 id='_para1'>我是h1</h1>
8
<div>
9
    <h1>我是div下的h1</h1>
10
</div>

页面上的“我是h1”就会变成红色字体，关于id选择器有以下几点记住：唯一性，选择器使用井号#前缀和id的名称组成，不能数字开头

class选择器#

• class属性表示“类名”
• 类名的命名规范和id的命名规范相同
• 使用点.前缀选择指定class的标签
• 多个标签可以使用相同类名 [多（标签）对一（类名）]
• 同一个标签可以使用属于多个类，类名用空格隔开 [一（标签）对多（类名）]

示例：

1
<style>
2
    .para1 {
3
        color: red;
4
    }
5
    .para2 {
6
        background-color: burlywood;
7
    }
8
</style>
9
<h1 class='para1 para2'>我是h1</h1>
10
<div>
11
    <h1 class='para1'>我是div下的h1</h1>
12
</div>

页面字体都是红色，但是只有“我是h1”有背景颜色，这就是class的应用

复合选择器#

复合选择器可以分为以下三种：

想理解这三个其实有点困难，每个字都能看到理解，但是看到还是想一下，特别是后代和交集，区别就是一个空格。接下来用示例巩固这三个选择器

第一题：哪些 <p> 会变成红色？

1
<div class="box">
2
  <p>第一段</p>
3
  <section>
4
    <p>第二段</p>
5
  </section>
6
</div>
7
<p>第三段</p>
8

9
.box p {
10
  color: red;
11
}

第二题：下面哪个 CSS 表示“选择 .article 里面的所有 <strong> 元素”？

1
A. .article, strong
2
B. .article strong
3
C. .articlestrong
4
D. .article.strong

第三题：结果是什么？

1
<ul class="menu">
2
  <li><a href="#">首页</a></li>
3
  <li><span><a href="#">关于</a></span></li>
4
</ul>
5
.menu a {
6
  color: blue;
7
}

第四题：哪个元素会变红？

1
<p class="active">A</p>
2
<div class="active">B</div>
3
<p>C</p>
4
p.active {
5
  color: red;
6
}

第五题：下面哪个选择器表示“选择同时拥有 btn 和 primary 两个 class 的元素”？

1
A. .btn .primary
2
B. .btn + .primary
3
C. .btn, .primary
4
D. .btn.primary

第六题：哪个元素会被选中？

1
<h2 class="title big">标题1</h2>
2
<h2 class="title">标题2</h2>
3
<p class="title big">标题3</p>
4
h2.title.big {
5
  color: red;
6
}

第七题：这段代码表示什么？

1
h1, h2, p {
2
  color: red;
3
}

第八题：如果希望“.title 和 .content 两类元素的文字都变成黑色”，应该怎么写？

第九题：下面三个选择器含义完全不同：

1
.box p
2
.box.p
3
.box, p

哪组选项对应正确？

1
A. 后代选择器、并集选择器、交集选择器
2
B. 交集选择器、后代选择器、并集选择器
3
C. 后代选择器、交集选择器、并集选择器
4
D. 并集选择器、交集选择器、后代选择器

最值得死记的其实就这一行：

1
.box p      /* 空格：后代 */
2
.box.active /* 紧挨：交集 */
3
.box, p     /* 逗号：并集 */

这三个能一眼区分，后面大部分复合选择器就不会再搅成一锅 CSS 粥了。

伪类#

CSS的伪类目前有60多个，而且随着 CSS 标准继续发展，还会新增，所以不能死记硬背，但是也不能只记住hover、active、link 、visited 或者first-child等这些，应该拓宽思路；其中序号选择器也属于伪类的一种

伪类是选择器后加单个冒号，看到伪类，应该有这样的一个问题：它在描述元素的什么状态或条件 ，伪类几乎所有标签能用，但不是所有，要想一下：这个元素有没有这个状态？ 比如div这个标签，没有focus这个状态，设置了也没用，以下是常用的伪类

伪类：序号选择器：

元素关系选择器#

字如其意，其实就是标签与标签之前的关系

子选择器

• 当使用 > 符号分隔两个元素时，它只会匹配那些作为第一 个元素的直接子元素，即两个标签为父子关系
• 子选择器从IE7开始兼容

相邻兄弟选择器

• 写法：+ 写在两个选择器之间。
• 两个元素必须是兄弟元素，也就是拥有同一个父元素，平级的关系。
• +后面的元素被选中
• 相邻兄弟选择器从IE7开始兼容

通用兄弟选择器

• 通用兄弟选择器（），ab 选择a元素之后所有同层级b元素
• 通用兄弟选择器从IE7开始兼容

属性选择器#

核心就 7 种常用写法，这里的attr是一个代词，不是什么属性，是代表某某属性

伪元素#

它们并没有真的往 HTML 里面添加两个标签，而是 CSS 创建出来的“虚拟元素”；最常见的是这些：

层叠性和选择器权重计算#

层叠性

• CSS全名叫做“层叠式样式表” ，层叠性是它很重要的性质
• 层叠性：多个选择器可以同时作用于同一个标签，效果叠加

层叠性的冲突处理

• 如果多个选择器定义的属性有冲突呢？CSS有严密的处理冲 突的规则
• id权重 > class权重 > 标签权重

复杂选择器权重计算

• 复杂选择器可以通过（id的个数, class的个数, 标签的个 数）的形式，计算权重

!important提升权重

• 如果我们需要将某个选择器的某条属性提升权重，可以在属 性后面写!important
• 很多公司不允许使用!important，因为这会带来不经意的 样式冲突

拓展选择器练习题#

可以ChatGptt提问：给我5道关于CSS3选择器的综合练习题，这5道要有特点，能答对基本就对CSS3的选择器有很大的掌握

拓展选择器速记#