本文主要介绍：选择器、CSS属性、背景属性和显示模式的操作写法。
目录
1. 复合选择器
有两个或者多个基础选择器，通过不同的方式组合而成
能够更准确更高效的选择目标元素（标签）
1.1 后代选择器
选中某元素的后代元素
写法：父选择器 子选择器 { CSS属性 }
1.2 子代选择器
选中某元素的子代元素
父选择器 > 子选择器 { CSS属性 }
1.3 并集选择器
选中 多组 标签设置 相同 的样式
形式：选择器1,选择器2,...选择器N { CSS属性 }
1.4 交集选择器
选中同时满足多个条件的元素
选择器1选择器2...选择器N { CSS属性 }
2. 伪类选择器
伪类表示元素状态，选择元素的某个状态设置样式
鼠标悬停状态：选择器:hover { CSS属性 }
2.1 超链接（拓展）
四种状态：
:link 访问前
:visited 访问后
:hover 鼠标悬停
:active 点击时激活
如果要给超链接设置以上四个状态需要按 LVHA 的顺序书写
<style>
a:link {
color:red;
}
a:visited {
color:green;
}
a:hover {
color: blue;
}
a:active {
color: orange;
}
</style>
</head>
<body>
<a href="#">a标签测试伪类</a>
</body>3. CSS特性
化简代码，定位问题
3.1 继承性
子级标签默认继承父级标签的文字控制属性
<style>
/* 给最高的父级文字控制属性 */
/* 当标签自己有样式 则不会继承 */
body {
font-size: 30px;
color: red;
font-weight: 700;
}
</style>
</head>
<body>
<!-- a标签颜色有自己的样式，但是其他都继承 -->
<a href="#">a标签</a>
<br>
<!-- h1有自己的字号其他都继承 -->
<h1>h1标签</h1>
<div>div标签</div>
<p>p标签</p>
<span>span标签</span>
</body>
3.2 层叠性
特点：
相同的属性会叠盖：后面的CSS覆盖前面的CSS属性
不同的属性会叠加：不同的CSS属性都生效
以相同的选择器为例：
3.3 优先级
也叫权重，一个标签使用了多种选择器，基于不同种类的选择器的匹配规则
公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内选择器 < !important
选中的标签的范围越大，优先级越低
<style>
#test {
color: orange;
}
.box {
color: blue;
}
div {
color: green;
}
* {
color: red !important;
/* 加上!important使得权重最大 但慎用 */
}
</style>
</head>
<body>
<div class="box" id="test" style="color: purple;">div标签</div>
</body>叠加计算规则
叠加计算：如果是复合选择器 需要权重叠加计算
公式：（每一级之间不存在进位）
（行内选择器，id选择器，类选择器个数，标签选择器个数）
规则：
1. 从左到右依次比较选择的个数，同一级个数多的优先级高，如果个数相同，则向后比较
2. !important 权重最高
3. 继承的权重最低
颜色是：橘色
颜色是：红色
最后的两个都是继承，倒数第二个的!important被继承覆盖
最终颜色是：蓝色
4. Emmet写法
width > w
height > h
w500 > width: 500px;
w500+h300 > width: 500px; height: 300px;
bgc > background-color: XXX;
5. 背景属性
网页中使用背景图实现装饰性的图片效果
背景属性：
5.1 背景图
background-image (bgi)
属性值：url
5.2 平铺方式
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./111.jpg);
/* 不平铺：左上角显示一张 */
/* background-repeat: no-repeat; */
/* 水平平铺 */
/* background-repeat: repeat-x; */
/* 垂直平铺 */
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div>div标签</div>
</body>5.3 背景图位置
一般写法：
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./111.jpg);
background-repeat: no-repeat;
/* 0 0 / left top 表示左上角 */
/* background-position: 0 0; */
/* background-position: left top; */
/* right bottom 右下角 */
/* background-position: right bottom; */
/* 第一个数字：负数左移 正数右移 */
/* 第二个数字：负数上移 整数下移 */
/* background-position: 50px 100px; */
/* 英文和数字混用 */
background-position: 50px center;
}
</style>
</head>
<body>
<div>div标签</div>
</body>特殊写法：
1. 可以颠倒取值顺序
2. 可以只写一个关键字，另一个方向默认为居中
3. 数字只写一个值来表示水平方向，垂直方向居中
比如：bottom left 先垂直方向再水平方向也可以的
5.4 背景图缩放
background-size 设置背景图大小
属性值：
1. 关键字：
— cover 等比例缩放背景图完全覆盖背景区，可能背景图部分看不见
— contain 等比例缩放背景图完全装入背景区，可能背景区部分空白
2. 百分比：根据盒子尺寸计算图片大小
3. 数字 + 单位 如px
<style>
div {
width: 500px;
height: 300px;
background-color: pink;
background-image: url(./111.jpg);
background-repeat: no-repeat;
/* 1.contain:等比例缩放，图的宽高和盒子尺寸相等，停止缩放，可能导致盒子露白 */
/* background-size: contain; */
/* 2.cover:缩放时完全覆盖盒子，会导致图片显示不全 */
/* background-size: cover; */
/* 3.100%:图片宽度和盒子宽度一样，图片的高度按照图片比例等比例缩放 */
background-size: 100%;
}
</style>
</head>
<body>
<div>div标签</div>
</body>5.5 背景图固定
background-attachment (bga)
背景不会随着元素的内容滚动
属性值：fixed
一般用于大图
<style>
body {
background-image: url(./111.jpg);
background-repeat: no-repeat;
background-position: center top;
/* 让图片不随着滚动条滚动 */
background-attachment: fixed;
}
</style>5.6 复合属性
background (bg)
属性值：背景色 背景图 背景图平铺 背景图位置/背景图缩放 背景图固定
（空格隔开各个属性值，不区分顺序）
<style>
div {
width: 400px;
height: 400px;
background: pink url(./111.jpg) no-repeat center bottom/cover;
}
</style>6. 显示模式
标签/元素 的显示方式，比如：div占一行 span占一块
布局网页时，根据标签的显示模式选择合适的标签摆放内容
6.1 块级元素
独占一行，宽度默认是父级的100%，添加宽高属性生效
6.2 行内元素
一行多个，尺寸由内容撑开，行内标签加宽高不生效，背景色生效
6.3 行内块元素
不换行，默认尺寸由内容撑开，加宽高生效
6.4 转换显示模式
属性名：display
属性值：
block 块级
inline-block 行内块
inline 行内
重点是前两个
块级转换为行内块
块级转换为行内
行内转为块级
行内转为行内块
行内块转为块级
本文主要介绍：选择器、CSS属性、背景属性和显示模式的操作写法。