nth-child
nth-child 选择器 选择指定选择器的父元素下的 指定选择器元素
如 .nthC:nth-child(n){} 选择的是 当前.nthC class类元素的父元素 的所有 含有.nthC的子元素
注意：如果.nthC类同级元素中含有不包含.nthC类的元素 该元素还是会占位 会影响.nthC的nth-child选择器，其不受.nthC的nth-child的影响
使用 nth-child(n) 方式 n>=1 时生效。
css计算时 n 从0开始计算。
例子 1 不包含.nthC类的元素 不受影响
//html
<view>
<view class="nthC">
<text class="">团队充值 1</text>
</view>
<view class="">
<text class="">团队充值 2</text>
</view>
<view class="nthC">
<text class="">团队充值 3</text>
</view>
<view class="nthC">
<text class="">团队充值 4</text>
</view>
<view class="nthC">
<text class="">团队充值 5</text>
</view>
<view class="nthC">
<text class="">团队充值 6</text>
</view>
</view>
//css
.nthC:nth-child(n) {
color: red !important;
}
结果
可以看出与.nthC同级的元素中 第二个没class的元素没有变红色
例子 2 不包含.nthC类的元素 会占据nth-child的计算位置
//html
<view>
<view class="nthC">
<text class="">团队充值 1</text>
</view>
<view class="">
<text class="">团队充值 2</text>
</view>
<view class="nthC">
<text class="">团队充值 3</text>
</view>
<view class="nthC">
<text class="">团队充值 4</text>
</view>
<view class="nthC">
<text class="">团队充值 5</text>
</view>
<view class="nthC">
<text class="">团队充值 6</text>
</view>
</view>
//css
.nthC:nth-child(even) {
color: red !important;
}
结果
css使用的是 nth-child(even) 选择偶数。
可是与.nthC同级的元素中 第二个元素没有.nthC类，所以不受.nthC:nth-child的影响，但是由于它还是在同级中占位了所以 会影响到 .nthC:nth-child的选择
为了防止出现选择器选择错误 一般使用nth-child所有的同级元素都需要包含相同的class类 这样插入的新元素 也包含相同的class类 就不会导致思维混乱
1、选择 div的父元素的第一个子元素
div:first-child{
}
2、选择div的父元素的最后一个子元素
div:last-child{
}
3、选择div的父元素的第n个子元素
div:nth-child(n){
}
4、选择div的父元素的 奇数行 子元素
div:nth-child(odd){
}
或者
div:nth-child(2n-1){
}
5、选择div的父元素的 偶数行 子元素
div:nth-child(even){
}
或者
div:nth-child(2n){
}
6、选择div的父元素的 n倍数的 子元素
1 选择2的倍数元素
div:nth-child(2n){
}
1 选择3的倍数元素
div:nth-child(3n){
}
7、nth-child(-n+n) 选择div的父元素的 第n个之前的 子元素 包含第n个子元素
选择 第10个选取之前的元素(包含第10个元素)
div:nth-child( -n + 10){
}
8、nth-child(n+n) 选择div的父元素的 第n个之后的 子元素 包含第n个子元素
选择 第10个选取之后的元素(包含第10个元素)
div:nth-child( n + 10){
}
9、nth-child(-n+b):nth-child(n+a) 选择div的父元素的 大于等于a且小于等于b 的子元素
选择 大于等于2且小于等于6 的元素
div:nth-child( -n + 6):nth-child( n + 2){
}