欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間：2023-06-26 16:10:07   作者：HHH 917   我要評論
nth-child 選擇器 選擇指定選擇器的父元素下的 指定選擇器元素，這篇文章主要介紹了CSS中nth-child 的使用示例教程,需要的朋友可以參考下

nth-child

nth-child 選擇器 選擇指定選擇器的父元素下的 指定選擇器元素如 .nthC:nth-child(n){} 選擇的是 當(dāng)前.nthC class類元素的父元素 的所有 含有.nthC的子元素注意：如果.nthC類同級元素中含有不包含.nthC類的元素 該元素還是會(huì)占位 會(huì)影響.nthC的nth-child選擇器，其不受.nthC的nth-child的影響

使用 nth-child(n) 方式 n>=1 時(shí)生效。css計(jì)算時(shí) n 從0開始計(jì)算。

例子 1 不包含.nthC類的元素 不受影響

//html
 <view>
           <view class="nthC">
             <text class="">團(tuán)隊(duì)充值 1</text>
           </view>
           <view class="">
             <text class="">團(tuán)隊(duì)充值 2</text>
           </view>
           <view class="nthC">
             <text class="">團(tuán)隊(duì)充值 3</text>
           </view>
           <view class="nthC">
             <text class="">團(tuán)隊(duì)充值 4</text>
           </view>
           <view class="nthC">
             <text class="">團(tuán)隊(duì)充值 5</text>
           </view>
           <view class="nthC">
             <text class="">團(tuán)隊(duì)充值 6</text>
           </view>
         </view>
//css
.nthC:nth-child(n) {
 color: red !important;
}

結(jié)果

在這里插入圖片描述

可以看出與.nthC同級的元素中 第二個(gè)沒class的元素沒有變紅色

例子 2 不包含.nthC類的元素 會(huì)占據(jù)nth-child的計(jì)算位置

//html
 <view>
           <view class="nthC">
             <text class="">團(tuán)隊(duì)充值 1</text>
           </view>
           <view class="">
             <text class="">團(tuán)隊(duì)充值 2</text>
           </view>
           <view class="nthC">
             <text class="">團(tuán)隊(duì)充值 3</text>
           </view>
           <view class="nthC">
             <text class="">團(tuán)隊(duì)充值 4</text>
           </view>
           <view class="nthC">
             <text class="">團(tuán)隊(duì)充值 5</text>
           </view>
           <view class="nthC">
             <text class="">團(tuán)隊(duì)充值 6</text>
           </view>
         </view>
//css
.nthC:nth-child(even) {
 color: red !important;
}

結(jié)果

在這里插入圖片描述

css使用的是 nth-child(even) 選擇偶數(shù)。可是與.nthC同級的元素中 第二個(gè)元素沒有.nthC類，所以不受.nthC:nth-child的影響，但是由于它還是在同級中占位了所以 會(huì)影響到 .nthC:nth-child的選擇

為了防止出現(xiàn)選擇器選擇錯(cuò)誤 一般使用nth-child所有的同級元素都需要包含相同的class類 這樣插入的新元素 也包含相同的class類 就不會(huì)導(dǎo)致思維混亂

1、選擇 div的父元素的第一個(gè)子元素

div:first-child{
}

2、選擇div的父元素的最后一個(gè)子元素

div:last-child{
}

3、選擇div的父元素的第n個(gè)子元素

div:nth-child(n){
}

4、選擇div的父元素的 奇數(shù)行 子元素

div:nth-child(odd){
}

或者

div:nth-child(2n-1){
}

5、選擇div的父元素的 偶數(shù)行 子元素

div:nth-child(even){
}

或者

div:nth-child(2n){
}

6、選擇div的父元素的 n倍數(shù)的 子元素

1 選擇2的倍數(shù)元素

div:nth-child(2n){
}

1 選擇3的倍數(shù)元素

div:nth-child(3n){
}

7、nth-child(-n+n) 選擇div的父元素的 第n個(gè)之前的 子元素 包含第n個(gè)子元素

選擇 第10個(gè)選取之前的元素(包含第10個(gè)元素)

div:nth-child( -n + 10){
}

8、nth-child(n+n) 選擇div的父元素的 第n個(gè)之后的 子元素 包含第n個(gè)子元素

選擇 第10個(gè)選取之后的元素(包含第10個(gè)元素)

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

到此這篇關(guān)于CSS中nth-child 的使用示例教程的文章就介紹到這了,更多相關(guān)css nth-child使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論