‘’’
html
伪类选择器
1.结构伪类
分组结构伪类:用于选择子元素,所以应该给它一个查询的起点
.list>li:nth-of-type(){}
倒数
.list>li:nth-last-of-type(){}
第一个
.list:first-of-type{}
最后一个
.list:last-of-type{}
:nth-of-type(an+b)
a:系数,【0.1.2….】
n:权数【0.1.2…】
b:偏移量,从0开始
匹配单个,a=0
:nth-of-type(b)
匹配一组
a=1
:nth-of-type(n){}全选
:nth-of-type(n+3){}从第3个开始匹配
a=-1,反向取
:nth-of-type(-n+3)
:nth-last-of-type(-n+b)取最后几个
a=2:匹配:奇偶位置的元素 2n:even 2n+1:odd
:nth-of-type(2n+0)偶数位元素
:nth-of-type(2n+1)奇数位元素
2.状态伪类,表单伪类
disabled 禁用
enabled 有效的,允许提交
input:disabled{}
input:anabled{}
单选按钮,选中后,将标签改变
input:checked+lable{}
hover悬停
focus获取焦点
‘’’
字体图标
iconfont.cn-需要的图标选入购物车-添加至项目-下载至本地-解压后文件夹-拖到项目中-打开-font class
第一步引入字体图标的css
<link rel="stylesheet"href="./iconfont.css">
第二步:引入图标class
<span class="iconfont icon-**"></span>
盒模型的5个属性
1.width
2.height
3.border
4.padding 内边距,呼吸区
5.margin外边距
box-sizing:border-box;
改变盒子大小的计算方式,使用户设置width,height就是盒子的实际大小,以方便计算与布局。
em,rem的区别
em=font-size 默认字号16px
em:永远和当前或父级的font-size进行绑定
rem:永远和html中的font-size绑定