本文介绍了CSS中五种高级选择器：后代选择器(div p)、子选择器(div > p)、后继选择器(.cls ~ p)、直接后继选择器(.cls + p)，以及尚未实现的列选择器(.aaa || td)。通过实例详细解读了这些选择器在实际开发中的使用场景和作用。
1. 空格 —— “后代选择器”
例如下面这个例子，表示div元素里面所有的p元素
div p {
...
}
2. > —— “子选择器”
例如下面这个例子，表示div元素里面所有的子代(不含孙代及以后)p元素
div>p {
...
}
3. ~ —— “后继选择器”
例如下面这个例子，表示.cls元素往后的同级的p元素
.cls~p {
...
}
4. + —— "直接后继选择器"
例如下面这个例子，表示.cls元素往后的一个同级元素(并且要求这个元素是p元素)
.cls+p {
...
}
5. || —— “列选择器” (浏览器还没实现)
例如下面这个例子，表示.aaa列的所有td元素
.aaa || td {
background: red;
}
| ISBN | Title | Price |
|---|---|---|
| 3476896 | My first HTML | $53 |
| 2489604 | My first CSS | $47 |
标签：...,符号,元素,例子,div,选择器,css,cls
来源： https://www.cnblogs.com/amiezhang/p/10801627.html
扫一扫
867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
