CSS新增选择器
属性选择器
可以根据元素特定属性来选择元素。
- E[att] 选择具有att属性的E元素
- E[att="val"] 选择具有att属性且属性值等于val的E元素
- E[att^="val"] 匹配具有att属性且值以val开头的E元素
- E[att$="val"] 匹配具有att属性且值以val结尾的E元素
- E[att*="val"] 匹配具有att属性且值中含有val的E元素
结构伪类选择器
主要根据文档结构来选择选择器元素,常用语父级选择器里面的子元素
- E:first-child 匹配父元素中的第一个子元素E
- E:last-child 匹配父元素中最后一个E元素
- E:nth-child(n) 匹配父元素中的第n个子元素E
- n可以为关键字,如even(偶数),odd(奇数)
- n可以为公式,如
- 2n偶数
- 2n+1奇数
- 5n 5的倍数
- n+5从前五个开始(包含第五个)到最后
- -n+5前五个(包含第五个)
- E:first-of-type 指定类型E的第一个
- E:last-of-type 指定类型E的最后一个
- E:nth-of-type(n) 指定类型E的第n个
伪元素选择器
可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
选择符有:
- ::before 在元素内部的前面插入内容
- ::after 在元素内部的后面插入内容
注意:
- before和after创建一个元素,但是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- 语法:element::before{ content:"..."; }
- before和after必须有content属性
- before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为1
使用如下:
div::before{
content:"abcde";
}
CSS3盒子模型
可以使用box-sizing来指定盒模型,有两个值:content-box和border-box
可以分为两种情况:
- box-sizing:content-box 盒子大小为width+padding+border
- box-sizing:border-box 盒子大小为width
如果盒子模型我们改为了border-box,那padding和border就不会撑大盒子了(前提是padding和border不会超过width宽度)
CSS滤镜filter
将模糊或颜色便宜等图形效果应用于元素
语法 filter:函数();
例如:filter:blur(5px); blur模糊处理,数值越大越模糊
calc函数
calc()此CSS函数让你在声明CSS属性值时执行一些计算
语法:
width:calc(100%-80px);
括号里可以使用 + - * / 来进行计算
CSS过渡属性
过渡动画:是从一个状态渐渐的过渡到另外一个状态
经常和:hover一起搭配使用
语法:
transition:要过渡的属性 花费时间 运动曲线 何时开始;
- 属性:想要变化的CSS属性,宽度高度 背景颜色 内外边距都可以,如果所有属性都要变化过度用all
- 花费时间:单位是秒(必须写单位)比如0.5s
- 运动曲线:默认是ease(可以省略)
- 何时开始:单位是秒(必须写单位),可以设置延迟触发时间,默认是0s(可以省略)
- 中间用一个空格隔开,同时改变多个属性的话,用逗号隔开不同属性