目录
-
复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成
作用：更准确、更高效的选择目标元素
<span>span标签</span>
<div>
<span>文字颜色是绿色</span>
</div>后代选择器
选择器的写法：父选择器 子选择器{CSS属性}，父子选择器之间用空格隔开。
注：后代选择器，选中所有后代，包括儿子、孙子、重孙子......
<style>
div span{
color:red;
}
</style>
<span>span标签</span>
<div>
<span>这是div的儿子span</span>
<p>
<span>这是孙子span</span>
</p>
</div>子代选择器
选择器的写法：父选择器>子选择器{CSS属性}，父子选择器之间用>隔开。
<style>
div > span{
color:red;
}
</style>
<span>span标签</span>
<div>
<span>这是div的儿子span</span>
<p>
<span>这是孙子span</span>
</p>
</div>并集选择器
选择器写法：选择器1，选择器2，......，选择器N{CSS属性}，选择器之间用逗号隔开。
<style>
p，
div，
span{
color:red;
}
</style>
<p>p标签</p>
<div>div标签</div>
<span>span标签</span>交集选择器
选择器写法：选择器1，选择器2{CSS属性}，选择器之间连写，没有任何符号。
注：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。
/*既有p标签，又有box类*/
<style>
p.box{
color:red;
}
</style>
<p class="box">p标签，使用类选择器box</p>
<p>p标签</p>
<div class="box">div标签，使用了类选择器box</div>-
伪类选择器
伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。
鼠标悬停状态：选择器:hover{CSS属性}
<style>
a:hover{
color:red;
}
.box:hover{
color:green;
}
</style>
<a href="#">标签</a>
<div class="box">div标签</div>伪类——超链接的四个状态
| 选择器 | 作用 |
|---|---|
| :link | 访问前 |
| :visited | 访问后 |
| :hover | 鼠标悬停 |
| :active | 点击时（激活） |
注：如果要同时设置四个状态，要按照LVHA的顺序书写。
-
CSS特性
继承性
子级默认继承父级的文字控制属性
<style>
body{
font-size:30px;
}
</style>
<body>
<div>div标签</div>
<p>p标签</p>
<span>span标签</span>
/*标签自身就有样式，则不继承*/
<a href="#">a标签</a>
<h1>h1标签</h1>
</body>层叠性
相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加：不同的CSS属性都生效
/color属性覆盖，font-weight和font-size属性叠加*/
<style>
div{
color:red;
font-weight:700;
}
div{
color:green;
font-size:30px;
}
</style>
<div>div标签</div>优先级
规则：选择器优先级高的样式生效
公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important
选择器选中标签的范围越大，优先级/权重越低
/*最终显示带有！important的属性*/
<style>
div{/*标签选择器*/
color:green;
}
*{/*通配符选择器*/
color:red;
}
.box{/*类选择器*/
color:blue;
}
#test{/*id选择器*/
color:orange;
}
</style>
<div class="box" id="test" style="color:purple;">div标签</div>/*行内样式*/注：！important提权功能，提高权重（优先级最高），慎用
优先级——叠加计算规则
行内样式个数，id选择器个数，类选择器个数，标签选择器个数
规则：
- 从左向右依次比较个数，同一级个数最多的优先级高；如果优先级相同，则向后比较。
- ！important权重最高
- 继承权重最低
-
背景属性
| 描述 | 属性（缩写） |
|---|---|
| 背景色 | background-color（bgc） |
| 背景图 | background-image(bgi) |
| 背景图平铺方式 | background-repeat(bgr) |
| 背景图位置 | background-position(bgp) |
| 背景图缩放 | background-size(bgs) |
| 背景图固定 | background-attachment(bga) |
| 背景复合属性 | background(bg) |
背景图
属性值：url(背景图URL)
<style>
/*盒子是400*400*/
div{
width:400px;
height:400px;
/*背景图默认是平铺的效果*/
background-image:url(./abc.png);
}
</style>
<div>div标签</div>背景图平铺方式
| 属性值 | 效果 |
|---|---|
| no-repeat | 不平铺 |
| repeat | 平铺（默认效果） |
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
<style>
/*盒子是400*400*/
div{
width:400px;
height:400px;
/*背景图默认是平铺的效果*/
background-image:url(./abc.png);
/*盒子左上角显示一张图，不平铺*/
background-repeat:no-repeat;
}
</style>
<div>div标签</div>背景图位置
属性值：水平方向位置 垂直方向位置
- 关键字
| 关键字 | 位置 |
|---|---|
| left | 左侧 |
| right | 右侧 |
| center | 居中 |
| top | 顶部 |
| bottom | 底部 |
- 坐标（数字+px，正负都可以）
<style>
/*盒子是400*400*/
div{
width:400px;
height:400px;
/*背景图默认是平铺的效果*/
background-image:url(./abc.png);
/*盒子左上角显示一张图，不平铺*/
background-repeat:no-repeat;
/*左上角*/
/*background-position: 0 0;*/
background-position: left top;
/*其他位置写法*/
background-position: 50px center;
background-position: -50px 100px;
}
</style>
<div>div标签</div>注：关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向，垂直方向为居中。
背景图缩放
- 关键字：
cover：等比例缩放背景图以完全覆盖背景区，可能被禁图片部分看不见
contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
- 百分比：
根据盒子尺寸计算图片大小
- 数字+单位
<style>
/*盒子是400*400*/
div{
width:400px;
height:400px;
/*背景图默认是平铺的效果*/
background-image:url(./abc.png);
/*盒子左上角显示一张图，不平铺*/
background-repeat:no-repeat;
/*contain:如果图的宽高尺寸相等停止缩放，可能导致盒子有留白*/
background-size: contain;
/*100%表示图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放*/
background-size: 100%;
}
</style>
<div>div标签</div>背景图固定
属性值：fixed
<style>
background-image:url(./abc.png);
background-repeat:no-repeat;
background-attachment: fixed;
}
</style>
<body>
<p>p标签</p>
.
.
.
<p>p标签</p>
</body>背景复合属性
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定
（属性之间用空格隔开，不区分顺序）
<style>
/*盒子是400*400*/
div{
width:400px;
height:400px;
background: pink url(./abc.png) no-repeat center bottom/cover;
}
</style>
<div>div标签</div>-
显示模式
块级元素
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
<style>
/*块级：独占一行；宽度默认是父级的100%；加宽高生效*/
div{
width:400px;
height:400px;
}
.div1{
background-color: brown;
}
.div2{
background-color: orange;
}
</style>
<div class="div1">div标签1</div>
<div class="div2">div标签2</div>行内元素
- 一行共存多个
- 宽高尺寸由内容撑开
- 加宽高不生效
<style>
/*行内：一行共存多个；尺寸由内容撑开；加宽高不生效*/
span{
width:200px;
height:200px;
}
.span1{
background-color: brown;
}
.span2{
background-color: orange;
}
</style>
<span class="span1">111</span>
<span class="span2">222</span>行内块元素
- 一行共存多个
- 默认尺寸由内容撑开
- 加宽高生效
<style>
/*行内块：一行共存多个；默认尺寸由内容撑开；加宽高生效*/
img{
width:300px;
height:300px;
}
</style>
<img src="./abc.png" alt="">
<img src="./abc.png" alt="">转换显示模式
属性名：display
属性值：
| 属性值 | 效果 |
|---|---|
| block | 块级 |
| inline-block | 行内块 |
| inline | 行内 |
<style>
/*块级：独占一行；宽度默认是父级的100%；加宽高生效*/
div{
width:400px;
height:400px;
display: inline-block;
}
.div1{
background-color: brown;
}
.div2{
background-color: orange;
}
</style>
<div class="div1">div标签1</div>
<div class="div2">div标签2</div>
2582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
