CSS3的新特性---选择器

提示：最重要的放到开头: 新增的CSS3特性是有兼容性问题的, IE9+才支持哈

---

一、新增属性选择器

​
１）利用属性选择器可以不用借助　类或ｉｄ选择器

实例

２）属性选择器还可以选择　属性＝值　的某些元素

实例:

３）属性选择器可以选择属性值开头的某些元素

４）属性选择器可以选择属性值结尾的某些元素　　

二、新增结构伪类选择器

结构伪类选择器主要根据 文档结构来选择, 常用于根据父级选择器中的子元素

实例:

 1. first-child   last-child    :nth-child()  三者的使用

如何使用如下可见:

---

 :nth-child() 的进一步使用 如下所示

经验之谈:
nth-child (n) 选择某个父元素的一个或多个特定的子元素:

n 可以是数字, 关键字和公式

n如果是一个准确的数字, 就是选择第 n 个子元素, 数字从1开始

n也可以是关键字: even偶数, odd奇数

这里必须是n 而不是字母a等等
其中可选择的公式如下:

公式	取值
2n	偶数
2n+1	奇数
5n	大于0 且是 5的倍数
-n+5	前5个 (包含第5个) —往前面数

nth-of-type(n) 与 :nth-child(n) 区别? nth-of-type 是指定类型的 第 n 个 而 :nth-child 是全部顺序排列后的 第 n 个

进一步解释:
1 . nth-child对父元素里面的所有孩子排序选择(序号是固定的) 先找到 第n个孩子, 然后看看和 指定的类型元素是否匹配
2 . nth-of-type 对父元素里面指定子元素进行排序选择. 先去匹配 指定的类型元素,
然后再根据 指定的元素 找到第 n 个 孩子

总结:
结构伪类选择器一般用于选择父级里面的第几个孩子

nth-child 对父元素里面所有孩子排序选择 (序号是固定的) 先找到第n个孩子, 然后看看是否与 指定元素 匹配

nth-of-type 对父元素里面指定子元素进行排序选择. 先去匹配 指定元素, 然后再根据指定元素 找第 n 个孩子

关于 nth-child (n) 我们要知道 n 是从 0 开始计算的, 要记忆常用的公式

如果是无序列表, 大多使用 nth-child 因为这时候 nth-child和nth-pf-type没有大的区别

类选择器, 属性选择器, 伪类选择器, 权重为 10 哦.

---

三、新增伪元素选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

拓展:
before 和 after 创建一个元素, 属于 行内元素

新创建的这个元素 在文档树( 注:文档树，是用来描述文档目录结构的工具)中是找不到的, 所以我们称之为 伪元素

伪元素选择器和标签选择器一样, 权重为 1

before在父元素内容的前面创建元素, after 在父元素内容的后面插入元素(最重要一点 )

实例:

---

四、新增过渡

其实就是 transition的用法和对应的语义的理解
transitioin: 要过渡的属性 花费时间 运动曲线 何时开始

1. 属性: 想要变化的CSS属性 (宽度高度 背景颜色 内外边距) 如果所有的属性都变化过渡, 写一个 all
2. 花费时间: 单位是 秒(必须写单位) 举例子: 10s
3. 运动曲线: 默认是 ease(这个是可以忽略的)
4. 何时开始: 单位是 秒(必须写单位) 可以设置延迟触发时间 默认是 0s (同样可以省略)

---

$原创不易，还希望各位大佬支持一下$

$点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$