复合选择器
定义:由两个或者多个基础选择器,通过不同的方式组合而成
作用:更精准,更高效的选择目标元素(标签)
后代选择器
作用:选择某标签中的所有后代元素
写法:父选择器+空格+子选择器{css属性},父子选择器之间用空格隔开
子代选择器
作用:选中某元素的子代元素(最近的子级)
写法:父选择器 +>+ 子选择器{css属性},父子选择器之间用>隔开
并集选择器
作用:选中多组标签设置相同样式
写法:选择器1,选择器2,…, 选择器{css属性},选择器之间用,隔开
交集选择器
作用:选中同时满足多个条件的元素
写法:选择器1选择器2{css属性},选择器之间连写,没有任何符号
注意:如果交集选择器中有标签选择器,标签选择器必须书写在最前面
伪类选择器
作用:伪类表示元素状态,选中元素的某个状态设置样式
鼠标悬停状态:选择器:hover{css属性}
伪类超链接(拓展)
选择器 | 作用 |
---|---|
:link | 访问前 |
:visited | 访问后 |
:hover | 鼠标悬停 |
:active | 点击时(激活) |
提示:如果要给超链接设置以上状态,需要按LVHA的顺序书写
css特性
继承性
特点:子级默认继承父级的文字控制属性
层叠性
特点:
- 相同的属性会覆盖:后面的css属性覆盖前面的css属性
- 不同的属性会叠加:不同的css属性都生效
优先级
优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。
规则:选择器优先级高的样式生效。
公式:通配符选择器<标签选择器<类选择器<id选择器<行内样式 <! important(提权功能)
(选中标签的范围越大,优先级越低)
优先级-叠加计算规则
叠加计算:如果是复合选择器,则需要权重叠加计算。
公式:(每一级之间不存在进位)
(行内样式,id选择器个数,类选择器个数,标签选择器个数)
规则:
· 从左向右依次比较选个数,同一级个数多的优先级高,如果个数相同,则向后比较
· !important 权重最高
· 继承权重最低
Emmet 写法
Emmet写法:代码的简写方式,输入缩写VS Code会自动生成对应的代码。
. HTML
说明 | 标签结构 | Emmet |
---|---|---|
类选择器 | 标签名.类名 | |
id 选择器 | 标签名#id名 | |
同级标签 | div+p | |
父子级标签 |
| div>p |
多个相同标签 | 123 | span*3 |
有内容的标签 |
内容
| div{内容} |
· CSS:大多数简写方式为属性单词的首字母
背景属性
描述 | 属性 |
---|---|
背景色 | background-color |
背景图 | background-image |
背景图平铺方式 | background-repeat |
背景图位置 | background-position |
背景图缩放 | background-size |
背景图固定 | background-attachment |
背景复合属性 | background |
背景图
作用:装饰(背景图默认平铺(复制)效果)
属性值:url
背景图平铺方式
属性值:
属性值 | 效果 |
---|---|
no-repeat | 不平铺 |
repeat | 平铺(默认) |
repeat-x | 水平方向平铺 |
repeat-y | 垂直方向平铺 |
背景图位置
属性名:background-position(bgp)
属性值:水平方向位置 垂直方向位置
· 关键字
关键字 | 位置 |
---|---|
left | 左侧 |
right | 右侧 |
center | 居中 |
top | 顶部 |
bottom | 底部 |
· 坐标(数字+px,正负都可以)
水平:正数向右;负数向左
垂直:正数向下;负数向上
提示:
关键字取值方式写法,可以颠倒取值顺序
· 可以只写一个关键字,另一个方向默认为居中;数字只写一个值表示水平方向,垂直方向为居中
背景图缩放
作用:设置背景图大小
属性名:background-size(bgz)
常用属性值:
- 关键字
cover:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见
contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白
-
百分比:根据盒子尺寸计算图片大小
-
数字+单位(例如:px)
背景图固定
作用:背景不会随着元素的内容滚动
属性名:background-attachment
属性值:fixed
背景复合属性
属性名:background(bg)
属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定
(空格隔开各个属性值,不区分顺序)
显示模式
块级元素
● 独占一行
● 宽度默认是父级的100%
● 添加宽高属性生效
行内元素
● 一行可以显示多个
● 设置宽高属性不生效
● 宽高尺寸由内容撑开
行内块元素
● 一行可以显示多个
● 设置宽高属性生效
● 宽高尺寸也可以由内容撑开
显示模式转换
属性名:display
属性值:
-
block 效果:块级
-
inline-block 效果:行内块
-
inline 效果:行内