css3 新增内容
目录
- 属性选择器
- 结构性伪类
- 其他伪类
属性选择器
E[attr]
只使用属性名,但没有确定任何属性值
代码实例
li[data-img]{
background: #ddd;
}
代码解析
- 选择有data-img属性的li元素, 改变其背景.
E[attr=”value”]
指定属性名,并指定了该属性的属性值
代码实例
li[data-img="1.jpg"]{
background: #ddd;
}
代码解析
- 选择data-img属性值为”1.jpg”的li元素, 改变其背景.
E[attr~=”value”]
指定属性名,并且具有属性值,此属性值是一个词列表,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写
代码实例
li[data-img~="1.jpg"]{
background: #ddd;
}
E [attr^=”value”]
指定了属性名,并且有属性值,属性值是以value开头的
代码实例
li[data-img^="1.jpg"]{
background: #ddd;
}
结构性伪类
E :nth-child(n)
表示E元素的第n个子节点(从 1 开始)
参数也可以是一个表达式,2n+1 -> 匹配第奇数个子元素,n 从 0 开始
代码实例
ul :nth-child(1){
background: #ddd;
}
代码解析
- 选择ul中第一个子元素, 改变其背景
E:nth-of-type(n)
表示E元素的第n个节点,且类型为E
代码实例
ul div:nth-of-type(1){
background: #ddd;
}
代码解析
- 选择ul中第一个div, 改变其背景
E :nth-last-child(n)
表示E父元素中的第n个子节点,从后向前计算
E:nth-last-of-type(n)
表示E元素中的第n个字节点,且类型为E , 从后向前计算
E :first-child
表示E父元素中的第一个子节点
E :last-child
表示E父元素中的最后一个子节点
E C:first-of-type
表示E父元素中的第一个子节点且节点类型是C的
E C:last-of-type
表示E父元素中的最后一个子节点且节点类型是C的
其他伪类
E::before
生成内容在E元素前
E::after
生成内容在E元素后
E:not(selector)
表示匹配E元素中除了 selector 的元素