2020-10-19前端学习笔记 - CSS3的新特性
CSS3的新特性
属性选择器
属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器了
| 选择符 | 简介 |
|---|---|
| E[attr] | 选择具有attr属性的E元素 |
| E[attr=‘val’] | 选择具有attr属性且属性值等于val的E元素 |
| E[attr^=‘val’] | 匹配具有attr属性且属性值以val开头的E元素 |
| E[attr$=‘val’] | 匹配具有attr的属性且属性值以val结尾的E元素 |
| E[attr*=‘val’] | 匹配具有attr属性且属性值中包含val的E元素 |
注意：类选择器、属性选择器、伪类选择器的权重都是10
结构伪类选择器
结构伪类选择器主要是根据文档结构来选择元素，常用于根据父级选择器里面的子元素
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中第一个子元素E |
| E:las-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个) |
nth-child(n) 选择某个父元素的一个或多个特定的子元素
- n 可以是数字、关键字和公式
-
n如果是数字，就是选择第n个子元素，里面的数字从1开始
-
n可以是关键字，如nth-child(even)/nth-child(odd)则是获取偶数行或奇数行
-
n可以是公式， 如nth-child(n):注意这里的字母必须用n不能用其它字母，n从0开始每次加1，往后面计算（第0个元素或超出了元素的个数会被忽略），相当于选择了所有子元素
-
常用的公式如下：
取值 偶数 + 1 5 10 15 …5的倍数 5 +5
-
nth-child 与nth-of-type去别
- nth-child：会把所有的盒子都排列序号（不管是不是同一类元素），在执行的时候先看nth-child(n)，然后再去看前面的标签名称
- nth-of-type：会把指定的元素排列序号，在执行的时候首先看指定的元素，然后再去看nth-of-type(n)第几个孩子。
<style>
/*选不到元素，因为第一个孩子是p而div是2*/
section div:nth-child(1){}
/*可以选出第一个div*/
section div:nth-of-type(1){}
</style>
<section>
<p></p>
<div></div>
<div></div>
</section>
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
|选择符|简介 |
|–|--|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以称为伪元素
- 语法： element::before{}
- before 和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签 选择器一样权重为1
伪元素使用场景：
- 配合字体图标，例如在文本框后面增加一个下拉小三角
- 鼠标悬浮盒子上出现遮盖层
- 利用伪元素清除浮动
盒子模型
CSS3中可以通过box-sizing来指定盒子模型，有2个值：content-box、border-box，这样计算盒子大小的方式就发生了改变
可以分为以下两种情况
- box-sizing: content-box盒子大小为：width + padding + border(以前默认的)
- box-sizing: border-box 盒子大小为width
如果盒子模型改为了box-sizing:border-box 那么padding和border就不会撑大盒子了，前提是padding和border不能超过width
CSS3 滤镜filter
filter css属性将模糊或颜色便宜等图形效果应用于元素
用法：filter:函数(); 例如：filter:blur(5px); blur模糊处理，数值越大越模糊
CSS3过渡（重点）
过渡（transition）是css3中具有颠覆性的特征之一，我们可以在不使用flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画：是从一个状态渐渐的过渡到另外一个状态
可以让我们的页面更好看，更动感十足，虽然低版本浏览器不支持，但不会影响页面布局
transition：要过渡的属性 花费时间 运动曲线 何时开始
- 属性：想要变换的css属性，宽度高度 背景颜色 内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以
- 花费时间：单位是秒（必须写单位） 如0.5s
- 运动曲线：默认是ease（可以省略）
- 何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）
过渡口诀：谁过渡给谁加，如果要写多个属性用逗号分隔或用all也可以
过渡案例：实现进度条效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
border-radius: 7px;
transition: all .7s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>
本文地址：https://blog.csdn.net/lixiaosenlin/article/details/109171196