本文详细介绍了CSS中的复合选择器、后代、子代、并集和交集选择器，以及CSS的继承性、层叠性和优先级规则。此外，还涵盖了Emmet编写技巧和背景图的使用方法，以及元素的显示模式如块级、行内和行内块级元素。
1.复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确、更高效的选择目标元素（标签）。
1.1后代选择器
后代选择器：
选中某元素的后代元素
。
选择器写法：父选择器
子选择器
{ CSS
属性
}
，父子选择器之间用
空格
隔开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
<style>
div span{
color: red;
}
</style>
</head>
<body>
<span> span标签</span>
<div>
<span>span是div的儿子称之为后代</span>
</div>
</body>
</html>
1.2子代选择器
子代选择器：选中某元素的子代元素（
最近的子级
）。
选择器写法：父选择器
>
子选择器
{ CSS
属性
}
，父子选择器之间用
>
隔开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
<style>
div>span{
color: red;
}
</style>
</head>
<body>
<div>
<span>这是 div 里面的 span变红</span>
<p>
<span>这是 div 里面的 p 里面的 span</span>
</p>
</div>
</body>
</html>1.3并集选择器
并集选择器：选中
多组标签
设置
相同
的样式。
选择器写法：选择器
1,
选择器
2, …,
选择器
N { CSS
属性
}
，选择器之间用
,
隔开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
<style>
div,p,span{
color: red;
}
</style>
</head>
<body>
<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>
</body>
</html>1.4交集选择器
交集选择器：选中
同时满足多个条件
的元素。
选择器写法：选择器
1
选择器
2 { CSS
属性
}
，选择器之间连写，没有任何符号。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</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>
注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。
1.5伪类选择器
伪类选择器：伪类表示元素
状态
，选中元素的某个状态设置样式。
鼠标悬停状态：
选择器
:hover { CSS
属性
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
<style>
a:hover {
color: red;
}
.box:hover {
color: green;
}
</style>
</head>
<body>
<a href="#">a 标签</a>
<div class="box">div 标签</div>
</body>
</html>
1.6超链接伪类
| 选择器 | 作用 |
| ：link | 访问前 |
| ：visited | 访问后 |
| ：hover | 鼠标悬停 |
| ：active | 点击时 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
<style>
a {
color: red;
}
a:hover {
color: green;
}
</style>
</head>
<body>
<a href="#">a 标签</a>
<div class="box">div 标签</div>
</body>
</html>
提示：如果要给超链接设置以上四个状态，需要按
LVHA
的顺序书写。
经验：工作中，一个
a
标签选择器设置超链接的样式，
hover
状态特殊设置
2、CSS特性
CSS特性：化简代码 / 定位问题，并解决问题
2.1、继承性
继承性：子级默认继承父级的
文字控制属性
。
注意：如果标签有默认文字样式会继承失败。 例如：
a
标签的颜色、标题的字体大小。
2.2、层叠性
特点： 1.相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
2.不同的属性会叠加：
不同的
CSS
属性都生效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
<style>
div {
color: red;
font-weight: 700;
}
div {
color: green;
font-size: 30px;}
</style>
<body>
<div>div 标签（绿色）</div>
</body>
</html>
注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断。
2.3、优先级
优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
<style>
div {
color: red;
}
.box {
color: green;
}
</style>
<body>
<div class="box">div 标签（绿色）</div>
</body>
</html>
2.4基础选择器
规则：选择器
优先级高的样式生效
。
公式：
通配符选择器
<
标签选择器
<
类选择器
< id
选择器
<
行内样式
< !important
（选中标签的范围越大，优先级越低）
复合选择器
-
叠加
叠加计算：如果是复合选择器，则需要
权重叠加
计算。
公式：（每一级之间不存在进位）
规则： 1、从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
2、!important
权重最高
3、继承权重最低
3、Emmet写法
Emmet写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。
HTML标签
| 说明 | 标签结构 | Emmet |
| 类选择器 | <div class="box"></div> | 标签名.类名 |
| id选择器 | <div id="box"></div> | 标签名#id名 |
| 同级标签 | <div></div><p></p> | div+p |
| 父子级标签 | <div><p></p></div> | dic<p |
| 多个相同标签 | <span>1</span><span>2</span><span>3</span> | span*3 |
| 有内容的标签 | <div>内容</<div> | div{内容} |
CSS样式：大多数简写方式为属性单词的首字母
| 说明 | CSS属性 | Emmet |
| 宽度 | width | w |
| 高度 | height | h |
| 背景色 | background-color | bgc |
| 多个属性 | width：200px；height：100px； | 2200+和00 |
4、背景属性
4.1背景图
网页中，使用背景图实现装饰性的图片效果。
属性名：
background-image
（
bgi
）
属性值：
url(
背景图
URL)
提示：背景图默认有
平铺（复制）效果
。
4.2平铺方式
属性名：
background-repeat
（
bgr
）
| 属性值 | 效果 |
| no-repeat | 不平铺 |
| repeat | 平铺 |
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
4.3背景图位置
属性名：
background-position
（
bgp
）
属性值：水平方向位置 垂直方向位置
| 关键字 | 位置 |
| left | 左侧 |
| right | 右侧 |
| center | 居中 |
| top | 顶部 |
| bottom | 底部 |
坐标：1.水平：正数向右；负数向左
2.垂直：正数向下；负数向上
提示：
关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中
4.4背景图缩放
作用：设置背景图大小
属性名：
background-size
（
bgz
）
常用属性值：
关键字 1、cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
2、contain
：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
百分比：根据盒子尺寸计算图片大小
数字
+
单位（例如：
px
）
提示：工作中，
图片比例与盒子比例相同
，使用
cover
或
contain
缩放背景图效果相同。
4.5背景图固定
作用：背景不会随着元素的内容滚动。
属性名：
background-attachment
（
bga
）
属性值：
Ũxed
4.6背景复合属性
属性名：
background
（
bg
）
属性值：背景色 背景图 背景图平铺方式 背景图位置
/
背景图缩放
背景图固定（
空格隔开各个属性值，不区分顺
序
）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
<style>
div{
width: 400px;
height: 400px;
/*导入背景图 */
background-image: url();
/* 平铺方式 */
background-repeat: no-repeat;
/* 背景图位置 */
background-position: center bottom;
background-position: 50px 100px;
background-position: 50px center;
/* 背景图缩放 */
background-size: cover;
background-size: contain;
/* 背景图固定 */
background-attachment: fixed;
/* 复合属性 */
background: pink url() no-repeat right center;
}
</style>
<body>
<div></div>
</body>
</html>
5、显示模式
示模式：标签（元素）的显示方式。
5.1块级元素
特点： 1.独占一行
2.宽度默认是父级的
100%
3.添加宽高属性生效
5.2行内元素
行内元素
特点： 1.一行可以显示多个
2.设置宽高属性不生效
3.宽高尺寸由内容撑开
5.3行内块元素
特点： 1.一行可以显示多个
2.设置宽高属性生效
3.宽高尺寸也可以由内容撑开
5.4转换显示模式
属性：display
| 属性值 | 效果 |
| block | 块级 |
| inline-block | 行内快 |
| inline | 行内 |
扫一扫
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
