提示:最重要的放到开头: 新增的CSS3特性是有兼容性问题的, IE9+才支持哈
一、新增属性选择器
1)利用属性选择器可以不用借助 类或id选择器
实例
2)属性选择器还可以选择 属性=值 的某些元素
实例:
3)属性选择器可以选择属性值开头的某些元素
4)属性选择器可以选择属性值结尾的某些元素
二、新增结构伪类选择器
结构伪类选择器主要根据 文档结构来选择, 常用于根据父级选择器中的子元素
实例:
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: 要过渡的属性 花费时间 运动曲线 何时开始
- 属性: 想要变化的CSS属性 (宽度高度 背景颜色 内外边距) 如果所有的属性都变化过渡, 写一个 all
- 花费时间: 单位是 秒(必须写单位) 举例子: 10s
- 运动曲线: 默认是 ease(这个是可以忽略的)
- 何时开始: 单位是 秒(必须写单位) 可以设置延迟触发时间 默认是 0s (同样可以省略)
原 创 不 易 , 还 希 望 各 位 大 佬 支 持 一 下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下
点 赞 , 你 的 认 可 是 我 创 作 的 动 力 ! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!
⭐️ 收 藏 , 你 的 青 睐 是 我 努 力 的 方 向 ! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!
✏️ 评 论 , 你 的 意 见 是 我 进 步 的 财 富 ! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!