CSS3给我们新增的选择器,可以更加便捷,更加自由的选择目标元素
1. 关系选择器
~ //兄弟选择器:选择该元素后面的同级的兄弟元素
例如:
h1~p:选择h1元素后面的所有同级p元素。
p~p:选择p元素后面的所有同级p元素,除了第一个p元素
2. 属性选择器
选择器 | 简介 |
---|---|
E[att] | 选择具有att属性的E元素 |
E[att="val''] | 选择具有att属性且属性值等于val的E元素 |
E[att^="val"] | 匹配具有att属性且值以val开头的E元素 |
E[att$="val"] | 匹配具有att属性且值以val结尾的E元素 |
E[att*="val"] | 匹配具有att属性且值中含有val的E元素 |
CSS1/2: E[att] E[att="val"] E[att|="val"] E[att~="val"]
3. 伪类选择器
选择器 | 简介 |
---|---|
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中的最后一个E元素 |
E:nth-child(n) |