先来说几种比较常见的用法:
1、选择正数第一个或倒数第一个
li:first-child {
color: red;
}
li:last-child {
color: red;
}
2、选择所有偶数节点或所有奇数节点
li:nth-child(even) {
color: red;
}
li:nth-child(2n) {
color: red;
}
li:nth-child(odd) {
color: red;
}
li:nth-child(2n+1) {
color: red;
}
li:nth-child(2n-1) {
color: red;
}
再来说几种更牛叉的用法:
3、选择前几个节点
/** 选择前 5 个 **/
li:nth-child(-5+n) {
color: red;
}
4、选择第几个节点之后的所有节点
/** 选择第 5 个节点 和 之后的所有节点 **/
li:nth-child(n+5) {
color: red;
}
5、选择倒数第几个节点
li:nth-last-child(5) {
color: red;
}
6、选择倒数第几个节点之前的所有节点
/** 选择倒数第 2 个节点 和 之前的所有节点 **/
li:nth-last-child(n+2) {
color: red;
}
7、选择后几个节点
这个暂时没找到!欢迎大神指点赐教。
文章评论
写得很详细。