复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确、更高效的选择目标元素（标签）。
1.后代选择器
用来选择某元素的后代的选择器
语法：
父级 子级（顺延写下来就可以了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.father {
background-color: beige;
height: 200px;
width: 200px;
}
.father p {
color: blueviolet;
}
</style>
<body>
<div class="father">
<p>子元素</p>
</div>
</body>
</html>2.子代选择器
定义：选中某元素的子代元素
语法：父级 > 子级
<style>
div > span {
color: red;
}
</style>
<div>
<span>这是 div 里面的 span</span>
<p>
<span>这是 div 里面的 p 里面的 span</span>
</p>
</div>3.并集选择器
并集选择器：选中多组标签设置相同的样式。
语法： 把需要应用样式的元素用逗号隔开
<style>
div,
p,
span {
color: red;
}
</style>
<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>4.交集选择器
交集选择器：选出满足多个筛选条件的元素的选择器
如果交集选择器中有标签选择器，标签选择器必须书写在最前面。
<style>
p.box {
color: red;
}
</style>
<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>5.伪类选择器
给样式应用上伪类选择器，则会在某些条件下启动样式，比如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>
</head>
<style>
.father:hover {
background-color: rgb(244, 244, 22);
height: 200px;
width: 200px;
}
.father {
background-color: blueviolet;
height: 200px;
width: 200px;
}
</style>
<body>
<div class="father">
<p>子元素</p>
</div>
</body>
</html>当我们把光标移到div上，div会从blueviolet颜色变成黄色。
CSS特性
1.继承性
继承性：子级默认继承父级的文字控制属性。
当我们给父级元素一个样式，如果它的后代元素没有特别地应用样式，那么它就会继承它父级的样式。
2.层叠性
相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加：不同的 CSS 属性都生效
这个特性很有用，可以用于后期修改别人的控件的样式，也可以在不用找样式位置的情况下快速添加样式。
3.优先级
通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
背景属性
背景图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.father {
background-image: url();
}
</style>
<body>
<div class="father">
<p>子元素</p>
</div>
</body>
</html>background-image:url()引入背景图片，但是我们很快就会发现如果图片太大，那么我们只能看到很小一部分，该怎么解决呢？
平铺
.image{
background: url(../../static/images/ai1.jpg) top center;
background-size: cover;
}上述代码可以把背景图片平铺
背景定位
背景图缩放
background-size:cover/contain
● cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
● contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
背景图固定
background-attachment: fixed;
显示模式
display:block/inline/inline-block
block:
● 独占一行
● 宽度默认是父级的100%
● 添加宽高属性生效
inline-block:
● 一行可以显示多个
● 设置宽高属性生效
● 宽高尺寸也可以由内容撑开
inline:
● 一行可以显示多个
● 设置宽高属性不生效
● 宽高尺寸由内容撑开
