元素关系选择器
| 名称 |
举例 |
意义 |
| 子选择器 |
div>p |
div 的子标签p |
| 相邻兄弟选择器 |
img+p |
图片后面紧跟着的段落将被选中 |
| 通用兄弟选择器 |
p~span |
p元素之后的所有同层级span元素 |
序号选择器
- :first-child
选择第一个子元素
eg:
.box1 p:first-child {
color: red
}
- :last-child
选择最后一个子元素
eg:
.box1 p:last-child {
color: red
}
- :nth-child()
可以选择任意序号的子元素
.box2 p:nth-child(3) {
color: green
}
:nth-child()可以写成 an+b的形式，表示从b开始每a个选一个，注意不能写为b+an
.box2 p:nth-child(3n+2) {
color: green
}
odd 等价于 2n+1，表示奇数
even 等价于 2n，表示偶数
.box2 p:nth-child(odd) {
color: green
}
- :nth-of-type()
将选择同种标签指定序号的子元素
- :nth-last-child() 和 :nth-last-of-type()
都是倒数选择
序号选择器的兼容性
| 选择器 |
兼容性 |
| :first-child |
IE7 |
| :last-child |
IE9 |
| :nth-child(3) |
IE9 |
| :nth-of-type(3) |
IE9 |
| :nth-last-child(3) |
IE9 |
| :nth-last-of-type(3) |
IE9 |
属性选择器
| 举例 |
意义 |
| img[alt] |
选择有alt属性的img标签 |
| img[alt="故宫"] |
选择alt属性是故宫的img标签 |
| img[alt^="北京"] |
选择alt属性以北京开头的img标签 |
| img[alt$="夜景"] |
选择alt属性以夜景结尾的img标签 |
| img[alt*="美"] |
选择有alt属性中含有美字的img标签 |
| img[alt~="手机拍摄"] |
选择有alt属性中有空格隔开的手机拍摄字样的img标签 |
| img[alt|="参赛作品"] |
选择有alt属性以"参赛作品-"开头的img标签 |
