CSS3有哪些新增的东西呢？
一、CSS3属性选择器
E[attr] ----- button["disabled"] 选择具有attr 属性的E元素
E[attr="XX"] ----- input[type="text"] 选择具有attr 属性且属性值等于XX的E元素
E[attr^="XX"] ----- input[type^="text"] 选择具有attr 属性且属性值以XX开头的E元素
E[attr$="XX"] ----- input[type$="text"] 选择具有attr 属性且属性值以XX结尾的E元素
E[attr*="XX"] ------ input[type*="text"] 选择具有attr 属性且属性值包含XX的E元素
二、CSS3结构伪类选择器
ul li :first-child{} 选择ul 下的第一个li 标签
ul li :last-child{} 选择ul 下的最后一个li 标签
ul li :nth-child(n) {} 选择ul 下的第 n 个li标签 （n从0 开始）
- 当n 可以为一个数字也可以是关键词 -- even 、odd (表格的隔行变色)
- 当n 为 2n 时等同 even 、当n 为 2n+1时等同odd
- 当n 为 5n 时选择5的倍数下的li元素
- 当n 为 n+3 时选择第 3 个之后的所有li元素
- 当n 为 -n+3 时选择前3个 li元素
div span:first-of-type{} 选择span类型的第一个元素
div span:first-of-type{} 选择span类型的最后一个元素
div span:nth-of-type(n){} 选择span类型的第n个元素
tip: 权重为10
三、CSS3伪元素选择器
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入元素
tip：
- before 和 after 必须有 content 属性
- before 在内容的前面，after 在内容的后面
- before 和 after 创建一个元素，但是属于行内元素（没有大小）----> {display:block'} or{display:inline-block'} 行内块
- before 和 after 里面看不见刚才创建的元素，所以我们称为伪元素
- 伪元素 和 标签选择器一样，权重为 1