目录：
- 复合选择器
- 后代选择器
- 子代选择器
- 并集选择器
- 交集选择器(了解)
- 伪类选择器
- CSS的特性
- 继承性
- 层叠性
- 快捷键写法
- 背景属性
- 显示模式
- 综合案列1：热词
- 综合案列2：界面
🐎正片开始
后代选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确，更高效，的选择目标元素(标签)
后代选择器写法：父选择器 子选择器{CSS的属性}，父子选择器之间用空格隔开。
看看如下代码如果我们想要让<div>内的所有<p>标签都获得想同的属性，并且不让<div>外面的<p>标签发生变化，该怎么办？难道用类标签一个一个在<div>内的 <p>中写<p class="类名"> 内容 </p>,这样写会不会太麻烦了，此时后代选择器不就派上用场了。
<body>
<p>我是在外面的p标签</p>
<div>
<p>我是div的儿子标签，我叫div_p</p>
<span>
<p>我是div的孙子标签，我叫div_pp</p>
........省略多个p标签
</span>
</div>
</body>
用法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div p{
color: red;
}
</style>
</head>
<body>
<p>我是在外面的p标签</p>
<div>
<p>我是div的儿子标签，我叫div_p</p>
<span>
<p>我是div的孙子标签，我叫div_pp</p>
</span>
</div>
</body>
</html>
效果展示
在上述代码中我写了一个后代选择器如下
<style>
div p{
color: red;
}
</style>
将<div>标签嵌套的所有<p>标签文字设置成了红色。
子代选择器
子代选择器写法：父选择器>子选择器{CSS的属性}，父子选择器之间用>隔开。
给出下面一份代码
<body>
<p>我是在外面的p标签</p>
<div>
<p>我是div的儿子标签，我叫div_p</p>
<span>
<p>我是div的孙子标签，我叫div_pp</p>
</span>
</div>
前面我们介绍了后代选择器，是将<div>标签下的儿子<p>标签和 <span> 下的<p> 标签都获得了相同的属性，此时，我只想让父标签<div>下的儿子标签<p>标签获得属性该怎么做呢？那就需要用到我们的子代选择器了。
子代选择器的写法如下
<style>
父选择器>子选择器{
css的属性
}
</style>
用法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>p{
color: red;
}
</style>
</head>
<body>
<p>我是在外面的p标签</p>
<div>
<p>我是div的儿子标签，我叫div_p1</p>
<p>我是div的儿子标签，我叫div_p2</p>
<p>我是div的儿子标签，我叫div_p3</p>
<span>
<p>我是div的孙子标签，我叫div_pp</p>
</span>
</div>
</body>
</html>
效果展示
在上述代码中我写了子代选择器如下
<style>
div>p{
color: red;
}
</style>
是将<div> 标签下的所有儿子<p>标签中文字设置为红色，而<div>标签下的孙子标签，重孙子<p> 标签都不会被影响到 。
并集选择器
并集选择器的重用：选中多组标签设置相同的样式。
选择器的写法：选择器1，选择器，选择器3，选择器N{CSS的属性}，选择器之间用逗号隔开。
应用场景：当多个标签都需要的属性相同时就可以用并集选择器达成目的。
用法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p,div,span{
color: red;
}
</style>
</head>
<body>
<p>我是p标签</p>
<div>我是div标签</div>
<span>我是span标签</span>
<h1>我是主要标签</h1>
</body>
</html>
效果展示
<p>，<div>，<span>，标签都获得了相同的属性，只有<h1>标签没有变为红色，因为在上面选择器中并没有并上<h1> 标签
交集选择器
交集选择器：选中同时满足多个条件的元素。
选择器写法：选择器1选择器2…选择器N{CSS的属性}，选择器之间连写，没有任何符号。
注意：但选择器中有标签选择器时需要写在最前面。
如下代码我选择的是<p>标签和类标签组合的交集选择器
<style>
p.box{
color: red;
}
</style>
<body> 标签内代码如下
<body>
<p class="box">p标签，使用了类选择器 box</p>
<p>p标签</p>
<div class="box">div 标签，使用了类选择器box</div>
</body>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=pp, initial-scale=1.0">
<title>Document</title>
<style>
p.box{
color: red; /*红色*/
}
</style>
</head>
<body>
<p class="box">p标签，使用了类选择器 box</p>
<p>p标签</p>
<div class="box">div 标签，使用了类选择器box</div>
</body>
</html>
效果展示
上述代码中我选择的是<p>和.box组合的交集选择器，所以只有同时满足有<p>标签的同时还使用了box。
伪类选择器
伪类选择器有以下几种：
| 选择器 | 作用 |
|---|---|
| 选择器:link | 访问前显示该选择器的属性 |
| 选择器:visited | 访问后显示该选择器的属性 |
| 选择器:hover | 鼠标悬停时显示选择器的属性 |
| 选择器:active | 点击时显示该选择器的属性 |
注意：伪类选择器主要用于超链接
接下来对这四种选择器逐一介绍
- 选择器:link的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test:link{
color: red; /*红色*/
}
</style>
</head>
<body>
<a href="#" class="test">我是超链接1，访问前我是红色，点击后我变为原色</a>
</body>
</html>
效果展示（访问前）
当点击后变为原来超链接颜色（访问后）
- 选择器:visited的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test:link{
color: red; /*红色*/
}
.test:visited{
color: green; /*绿色*/
}
</style>
</head>
<body>
<a href="#" class="test">我是超链接1，访问前我是红色，访问后我变为绿色</a>
</body>
</html>
效果展示图（访问前）
访问后
- 选择器:hover的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test:hover{
color: blue;
}
</style>
</head>
<body>
<a href="#" class="test">我是超链接1，悬停前我是原色，悬停后我变为蓝色</a>
</body>
</html>
悬停前效果图
悬停后效果图
- 选择器:active的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test:active{
color: pink;
}
</style>
</head>
<body>
<a href="#" class="test">我是超链接1，鼠标左键没一直按下时我是原色，长按时我变为粉色</a>
</body>
</html>
鼠标左键没点击前效果图
左键一直点击后效果图
继承性
继承性：子级标签默认继承父级标签的文字属性。
文字属性有如下
继承用法代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
color: red;
font-size: 32px;
}
</style>
</head>
<body>
<p>我是p标签</p>
<div>我是div标签</div>
<div><span>我是span标签</span></div>
<a href="#">我是超链接</a>
<h1>我是h1标签</h1>
</body>
</html>
效果图
注意： 在继承中，当子标签有文字属性，则会用自己的文字属性，没有的才会继承父标签的文字属性，例如上面的<a>标签，本身就有文字是蓝色的属性，所以它不会继承父亲的红色，只会继承没有的字号；还有上面的<h1>标签也是它本身有字号属性，但没有颜色属性，所以就继承了父亲的红色。
层叠性
特点：
- 相同的属性会覆盖：后面的CSS属性会覆盖前面的CSS属性
- 不同的属性会叠加：不同的CSS属性低频生效
层叠性用法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:red;
font-size: 32px;
}
p{
color: blue;
font-weight: 700;
}
</style>
</head>
<body>
<p>我是P标签</p>
</body>
</html>
可以看见我写了两个<p>选择器，如果这两个选择器有相同的属性则后面的属性会覆盖前面的属性，不同的属性则会叠加，所以下面我们应该看见的现象是<p> 标签中的子变大为32px,并且加粗了，由于后面覆盖前面的相同属性所以最终为蓝色
效果如下
快捷键
在VS Code中输入缩写会自动生成对应的代码
输入对应的缩写，生成对应的标签，整理成了表格如下
| 缩写 | 标签 | 说明 |
|---|---|---|
| div.box | <div class="box"></div> | 生成使用类的标签 |
| div#box | <div id="box"></div> | 生成使用id的标签 |
| div+p | <div></div><p></p> | 生成同级标签 |
| div>p | <div><p></p></div> | 生成父子级标签 |
| span*3 | <span></span><span></span><span></span> | 生成多个相同的同级标签 |
| div{内容} | <div>内容</div> | 生成有内容的标签 |
CSS中属性的简写如下↓
w回车 = => width:;
h回车 = = > height:;
w500回车 = => width:500px;
h500回车 = => height:500px;
bgc+回车 = => background-color: #fff;
w500+h500+bgc回车 = => height: 500px; width: 500px; background-color: #fff;
背景属性
接下来我们将介绍一下背景属性
背景属性都有哪些呢？我将常用的背景属性都整理成了表格如下
| 属性 | 说明 |
|---|---|
| background-color | 背景色 |
| background-image | 背景图 |
| background-repeat | 背景图平铺方式 |
| background-position | 背景图位置 |
| background-size | 背景图缩放 |
| background-attachment | 背景图固定 |
| background | 背景复合属性 |
接下来对上面属性逐一介绍以及使用
由于颜色在前面章节以及介绍过了，本节就不介绍了，有不懂的小伙伴可以看看前面章节的博客,点击background-color即可跳转过去
1.background-image 的使用
属性值有url(图片路径);
代码使用如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 526px;
background-image: url(./dm.jpg);
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果展示
可以发现我明明只用了一张背景图为啥给我来了四份，在浏览器中如果背景图大小不能占满则会赋值这张图片将其余空位填满，因为我刚好将 <div> 标签的宽高设置成了图片的宽和高的2倍，所以就看见了上面填充四张图片的效果，这其实是平铺带来的效果。如果有时不想要这种效果该怎么办呢？是否有办法取消？那就得看看下面介绍的属性了。
- background-repeat的使用
属性值如下
| 属性值 | 作用 |
|---|---|
| no-repeat | 不平铺 |
| repeat | 平铺(默认效果) |
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
接下来对逐一使用一下（repeat不介绍）
- no-repeat的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 526px;
background-image: url(./dm.jpg);
background-color: pink;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果展示
不平铺则只会显示一张，不会复制该图片去填充其他空位了。
- repeat-x的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 526px;
background-image: url(./dm.jpg);
background-color: pink;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图
水平平铺则是水平方向如果有空位则去复制该图片去填充。
- repeat-y的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 526px;
background-image: url(./dm.jpg);
background-color: pink;
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图
垂直方向有空位则复制图片填充垂直空位
- background-position的使用
属性值：水平方向位置 垂直方向位置
关键字
| 关键字 | 位置 |
|---|---|
| left | 左侧 |
| right | 右侧 |
| center | 居中 |
| top | 顶部 |
| bottom | 底部 |
坐标表示：坐标(数字+px,正负都可以)
给 background-position属性赋值可以有以下几种情况
<style>
div{
/*如果两个位置都是关键字，则无需考虑水平位置，和垂直位置*/
background-position: right center; /* 等同于background-position: center right;*/
/*像素表示坐标（正负都可以）*/
background-position: 100px -100px;
/*数字与关键字混用*/
background-position: 100px center;
}
</style>
也有赋值一个的情况如下
- 只给background-position属性赋值一个值时，并且是数字+px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background-color:pink;
background-image: url(./dm.jpg);
background-repeat: no-repeat;
background-position:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图
background-position被赋值一个像素值(数字+px)时默认是设置了水平坐标，向右边偏移了100px,则垂直方向会被默认居中
- 只给background-position属性赋值一个值时，并且是关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background-color:pink;
background-image: url(./dm.jpg);
background-repeat: no-repeat;/*设置了水平方向*/
background-position:right;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图
当是关键字时某一个方向被设置了，另一个方向这是居中
- background-size属性的使用
作用：设置背景图大小
常用属性值：
- 关键字
- cover：等比例缩放背景图片直到图片完全覆盖背景区，可能会导致背景图部分看不见
- contain：等比例缩放背景图片，当背景图的宽或者高等于了背景区的宽或者高时，就停止缩放，可能会导致背景区部分有空白(未被背景图占用)。
- 百分比：根据盒子尺寸计算图片大小
- 数字+单位(px) 不常用
- 属性值cover的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 600px;
height:400px;
background-color:pink;
background-image: url(./dm.jpg);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图
可以看见cover属性值导致图片完全覆盖了背景区，导致背景图部分无法看见。
- 属性值contain的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 600px;
height:400px;
background-color:pink;
background-image: url(./dm.jpg);
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图
可以看见contain属性值按照等比例缩放到高度与背景区高度一致时则不继续缩放。
- background-attachment属性的使用
当我们设置了背景图时，并且背景图上面的文字显示行数过多了，超过了本界面所承受的行数，需要滑动滚轮查看下面行的文字时，在滑动滚轮的同时不希望背景图片跟着动，则这时候就需要固定背景图片
固定背景图的属性值是：fixed
当我们不固定背景图片的场景
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-image: url(./a.jpg);
background-repeat: no-repeat;
background-size: 1550px 830px;
line-height: 64px;
}
</style>
</head>
<body>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
</body>
</html>
没滑动滚轮时的效果图
滑动时背景图也跟着动了，很明显这种效果不好
当固定背景图代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-image: url(./a.jpg);
background-repeat: no-repeat;
background-size: 1550px 830px;
line-height: 64px;
background-attachment: fixed;
}
</style>
</head>
<body>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
<div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
</body>
</html>
效果图
如上我已经滑到最底部了此时背景图没有跟着动，已经固定住了。
- background属性介绍
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定 (空格隔开各个属性值，不区分顺序)
作用：简化了代码。
写法如下
background:red url(图片路径) no-repeat center top/contain;
显示模式
块级：独占一行，宽高属性生效，默认宽度是父级的100%。
行内：一行共存多个，宽高属性不生效，宽高由内容撑开。
行内块：一行共存多个，宽高属性生效，宽高默认由内容撑开。4
显示模式转换
属性名：display
属性值：如下↓
| 属性值 | 效果 |
|---|---|
| block | 块级 |
| inline-block | 行内块 |
| inline | 行内 |
综合案例1:热词
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>热词</title>
<style>
a{
width: 200px;
height: 80px;
display: block;
background-color: #3064bb;
text-align: center;
line-height: 80px;
color: #fff;
text-decoration: none;
font-size: 18px;
}
a:hover{
background-color: #608dd9;
}
</style>
</head>
<body>
<a href="https://baike.baidu.com/item/HTML/97049?fr=ge_ala">HTML</a>
<a href="https://baike.baidu.com/item/CSS/5483256?fr=ge_ala">CSS</a>
<a href="https://baike.baidu.com/item/JavaScript/321142?fr=ge_ala">JavaScript</a>
<a href="https://baike.baidu.com/item/Vue.js/19884851?fr=ge_ala">Vue</a>
<a href="https://baike.baidu.com/item/react/18077599?fr=aladdin">React</a>
</body>
</html>
效果展示
综合案例2：界面
源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
text-align: right;
color: #333;
font-size: 20px;
}
div{
height: 500px;
background-color: #f3f3f4;
background-image: url(1.png);
background-size: contain;
background-repeat: no-repeat;
}
div h2{
font-size: 36px;
line-height: 100px;
font-weight: 300;
}
div a{
display: inline-block;
color: #fff;
width: 125px;
height: 40px;
background-color: #f06b1f;
line-height: 40px;
text-align: center;
text-decoration: none;
font-weight: 700;
}
div a:hover{
color: #ff0000eb;
}
</style>
</head>
<body>
<div>
<h2>让创造产生价值</h2>
<p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
<a href="#">我要报名</a>
</div>
</body>
</html>
效果展示
完结🎉🎉🎉
![[C++] 剖析AVL树功能的实现原理](https://img-blog.csdnimg.cn/img_convert/8d67bd55a5c7813e58d0da0cf0c56986.png)
