css3的新特性 -- 选择器
属性选择器
根据元素特定属性的来选择元素
根据 type是什么值来选择
选择 属性值开头的某些元素 ^
以谁结尾 $
* 只要有 就选择出来
权重
类选择器 , 属性选择器 ,伪类选择器 权重是10
结构伪类选择器
根据文档结构来选择元素,常用于根据父级选择器里面的子元素
:first-child 第一个孩子
:last-child 最后一个孩子
选择某个父元素的一个或者多个特定的子元素
里面是数字
里面是关键字 even偶数 odd 奇数
里面是公式
写n
写 2n 等价于 even
写2n+1 等价于 odd
写 几n 就是几的倍数
n+几 就是从第几个开始 ,然后到最后 ; n是0 要注意!!
-n+几 就是前几个
:first-of-type :last-of-type :nth-of-type(n)
nth-child 和 nth-of-child的区别
nth-child 会把所有的盒子都排列起来 一视同仁
所以 没有改变 ,因为找不到
nth-of-type 会把指定元素的盒子排列起来 只看亲生的
伪元素选择器
伪元素选择器 可以帮助我们利用css创建新标签元素,而不需要html标签,从而简化html结构
为什么叫伪元素?
- 因为 利用 before 和after创建一个元素,但是属于行内元素
- 且 新创建的这个元素在文档树中是找不到的,所以称为伪元素
::before ::after
content 必须写,且用''括起来