1 包含选择符(Element Element) css2
兼容浏览器版本
| IE |
Firefox |
Chrome |
Safari |
Opera |
iOS Safari |
Android Browser |
Android Chrome |
| 6.0+ |
2.0+ |
4.0+ |
3.1+ |
3.5+ |
3.2+ |
2.1+ |
18.0+ |
注：
匹配包含的所有（符合条件的）节点
示例
...
<head>
<style>
.blue p {
color: blue;
}
</style>
</head>
<body>
<div class="blue">
<p>蓝色1</p>
<p>蓝色2</p>
<p>蓝色3</p>
<div>
<p>蓝色4</p>
<div>
<p>蓝色5</p>
<div>颜色6</div>
</div>
</div>
</div>
</body>
...
包含选择符.png
2 子选择符(Element > Element) css2
兼容浏览器版本
| IE |
Firefox |
Chrome |
Safari |
Opera |
iOS Safari |
Android Browser |
Android Chrome |
| 6.0+ |
2.0+ |
4.0+ |
3.1+ |
3.5+ |
3.2+ |
2.1+ |
18.0+ |
注：
匹配所有子节点
不匹配更深层次的节点，如：孙子节点
示例
...
<head>
<style>
.blue > p {
color: blue;
}
.blue > div > p {
color: green;
}
</style>
</head>
<body>
<div class="blue">
<p>蓝色1</p>
<p>蓝色2</p>
<p>蓝色3</p>
<div>
<p>蓝色4</p>
<div>
<p>蓝色5</p>
<div>颜色6</div>
</div>
</div>
</div>
</body>
...
1.png
3 相邻选择符(Element + Element) css2
兼容浏览器版本
| IE |
Firefox |
Chrome |
Safari |
Opera |
iOS Safari |
Android Browser |
Android Chrome |
| 7.0+ |
2.0+ |
4.0+ |
3.1+ |
3.5+ |
3.2+ |
2.1+ |
18.0+ |
注：
匹配所有（符合条件的）相邻节点
元素本身不被选中
示例
...
<head>
<style>
.blue p + p {
color: blue;
}
</style>
</head>
<body>
<div class="blue">
<p>蓝色1</p>
<p>蓝色2</p>
<p>蓝色3</p>
<p>蓝色3</p>
<p>蓝色3</p>
<div>
<p>蓝色4</p>
<div>
<p>蓝色5</p>
<div>颜色6</div>
</div>
</div>
<p>蓝色3</p>
<p>蓝色3</p>
</div>
</body>
...
相邻选择符.png
4 兄弟选择符(Element ~ Element) css3
兼容浏览器版本
| IE |
Firefox |
Chrome |
Safari |
Opera |
iOS Safari |
Android Browser |
Android Chrome |
| 7.0+ |
2.0+ |
4.0+ |
3.1+ |
3.5+ |
3.2+ |
2.1+ |
18.0+ |
注：
匹配所有（符合条件的）兄弟节点
元素本身不被选中
示例
...
<head>
<style>
.blue p ~ p {
color: blue;
}
</style>
</head>
<body>
<div class="blue">
<p>蓝色1</p>
<p>蓝色2</p>
<p>蓝色3</p>
<p>蓝色3</p>
<p>蓝色3</p>
<div>
<p>蓝色4</p>
<div>
<p>蓝色5</p>
<div>颜色6</div>
</div>
</div>
<p>蓝色3</p>
<p>蓝色3</p>
</div>
</body>
...
兄弟选择符.png
网友评论