CSS教程

关注公众号 jb51net

关闭
网页制作 > CSS > CSS教程 >

CSS中nth-child 的使用示例教程

HHH 917

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){
}

到此这篇关于CSS中nth-child 的使用示例教程的文章就介绍到这了,更多相关css nth-child使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！