CSS3 就是最新的CSS标准,在原有的CSS基础上,新增了一些特性
只要新增了三种选择器:属性选择器、结构伪类选择器、伪元素选择器,2D、3D转换、动画、盒子模型、过渡等
1、属性选择器
属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助类选择器 或 id选择器 了
就是我们可以自己给标签定义的属性、属性值,不要依靠类选择器和id选择器了
2、结构伪类选择器
注意:
-
nth-child
对父元素里面所有的孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和E匹配 -
nth-of-type
对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找到第n个孩子
nth-child(n)
选择某个父元素的一个或多个特定的子元素
- n 可以是数字,关键字 和 公式
- 如果是数字,就是选择第n个元素,里面数字从1开始
n
可以是关键字:even
偶数,odd
奇数n
是公式,常见的格式:2n
:偶数2n + 1
:奇数n + 5
:从第5个开始到最后一个-n + 5
:前5个
总结:
- 结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child
:先去找孩子再去匹配nth-of-type
:先去匹配再去找孩子n
是从0开始的,但是第0个元素或者超出元素的个数会被忽略的- 属性选择器 和 结构伪类选择器权重都为10
3、伪元素选择器
伪元素选择器可以帮助我们利用css创建新标签元素,而不需要HTML标签,从而简化HTML结构
::after
:在元素内部的前面插入内容::before
:在元素内部的后面插入内容
注意:
before
和after
创建一个元素,但是属于行内元素- 新创建的这个元素在文档树中是找不到的,不是真正意义上的元素,所以我们称之为伪元素
before
和after
必须要有content
属性- 伪元素选择器和标签选择器一样,权重为 1
4、盒子模型
CSS3中可以通过 box-sizing
来指定模型,它有两个值:content-box
、border-box
content-box
:盒子大小为width + padding + border
border-box
:盒子大小为width
所以,当我们设置了 box-sizing: border-box;
之后,padding
和 border
就不会撑大盒子了(当然前提是 padding
和 border
不会超出 width
宽度)
5、过渡 transition
为元素天机一种效果,让其兄一种样式过渡到另外一种样式
经常和
:hover
一起搭配使用
transition: 要过渡属性 花费时间 运动曲线 何时开始
- 属性:想要变化的CSS属性,可以是宽度、高度、颜色;如果想要所有属性都过渡,下一个
all
就可以(必写) - 花费时间:单位是秒,必须写单位(必写)
- 运动曲线:默认是
ease
(可以省略) - 何时开始:单位是秒,必须写单位,默认是 0s
<style>
div {
width: 200px;
height: 80px;
background-color: pink;
/* 如果要添加多个属性,用逗号(,) 隔开 */
transition: width .5s, height .5s;
/* 想要添加所有的属性,直接用all就行 */
/* transition: all .5s; */
}
div:hover {
width: 400px;
height: 160px;
background-color: skyblue;
}
</style>