1. 属性选择器
使用方法
选择符 | 描述 |
---|---|
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元素 |
2. 结构为类选择器
使用方法
选择符 | 描述 |
---|---|
E:first-child | 匹配父元素中第一个子元素E |
E:last-child | 匹配父元素中最后一个元素E |
E:nth-child(n) | 匹配父元素中的第n个子元素E |
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E的最后一个 |
E:nth-of-type(n) | 指定类型E的第n个 |
3. 伪类选择器
使用方法
选择符 | 描述 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
- before和after属于行内元素
- before和after必须有content属性
4. 盒子模型 box-sizing
属性
属性 | 描述 |
---|---|
content-box | 默认(原始) |
boder-box | 把border和padding计算在内 |
content-box原始模型
boder-box模型
4. 滤镜 filter
- 模糊滤镜:filter:blur();
5. CSS计算函数 calc()
calc()
括号内可进行加减乘除运算
6. 过渡 transition()
transition:过渡属性 花费时间(单位:秒) 运动曲线(可不填) 开始时间(单位:秒)
运动曲线属性
- 匀速 linear
- 逐渐慢 ease
- 加速 ease-in
- 减速 ease-out
- 先加速后减速 ease-in-out