目錄

• nth-child
• 1、選擇 p的父元素的第一個子元素
• 2、選擇p的父元素的最后一個子元素
• 3、選擇p的父元素的第n個子元素
• 4、選擇p的父元素的 奇數行 子元素
• 5、選擇p的父元素的 偶數行 子元素
• 6、選擇p的父元素的 n倍數的 子元素
• 7、nth-child(-n+n) 選擇p的父元素的 第n個之前的 子元素 包含第n個子元素
• 8、nth-child(n+n) 選擇p的父元素的 第n個之后的 子元素 包含第n個子元素
• 9、nth-child(-n+b):nth-child(n+a) 選擇p的父元素的 大于等于a且小于等于b 的子元素

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="9cd1-62b0-aaad-90bc nthC">
             <text class="62b0-aaad-90bc-e2ed ">團隊充值 1</text>
           </view>
           <view class="aaad-90bc-e2ed-59a6 ">
             <text class="90bc-e2ed-59a6-d720 ">團隊充值 2</text>
           </view>
           <view class="e2ed-59a6-d720-4d5e nthC">
             <text class="59a6-d720-4d5e-2ce8 ">團隊充值 3</text>
           </view>
           <view class="d720-4d5e-2ce8-47be nthC">
             <text class="4d5e-2ce8-47be-7296 ">團隊充值 4</text>
           </view>
           <view class="2ce8-47be-7296-5a69 nthC">
             <text class="47be-7296-5a69-f41e ">團隊充值 5</text>
           </view>
           <view class="7296-5a69-f41e-89f6 nthC">
             <text class="5a69-f41e-89f6-2c29 ">團隊充值 6</text>
           </view>
         </view>
//css
.nthC:nth-child(n) {
 color: red !important;
}

結果

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

例子 2 不包含.nthC類的元素 會占據nth-child的計算位置

//html
 <view>
           <view class="2c29-6e0d-391a-5fd7 nthC">
             <text class="9cd1-62b0-aaad-90bc ">團隊充值 1</text>
           </view>
           <view class="62b0-aaad-90bc-e2ed ">
             <text class="aaad-90bc-e2ed-59a6 ">團隊充值 2</text>
           </view>
           <view class="90bc-e2ed-59a6-d720 nthC">
             <text class="e2ed-59a6-d720-4d5e ">團隊充值 3</text>
           </view>
           <view class="59a6-d720-4d5e-2ce8 nthC">
             <text class="d720-4d5e-2ce8-47be ">團隊充值 4</text>
           </view>
           <view class="4d5e-2ce8-47be-7296 nthC">
             <text class="2ce8-47be-7296-5a69 ">團隊充值 5</text>
           </view>
           <view class="47be-7296-5a69-f41e nthC">
             <text class="7296-5a69-f41e-89f6 ">團隊充值 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、選擇 p的父元素的第一個子元素

p:first-child{
}

2、選擇p的父元素的最后一個子元素

p:last-child{
}

3、選擇p的父元素的第n個子元素

p:nth-child(n){
}

4、選擇p的父元素的 奇數行 子元素

p:nth-child(odd){
}

或者

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

5、選擇p的父元素的 偶數行 子元素

p:nth-child(even){
}

或者

p:nth-child(2n){
}

6、選擇p的父元素的 n倍數的 子元素

1 選擇2的倍數元素

p:nth-child(2n){
}

1 選擇3的倍數元素

p:nth-child(3n){
}

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

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

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

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

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

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

9、nth-child(-n+b):nth-child(n+a) 選擇p的父元素的 大于等于a且小于等于b 的子元素

選擇 大于等于2且小于等于6 的元素

p:nth-child( -n + 6):nth-child( n + 2){
}

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

總結

以上是生活随笔為你收集整理的CSS中nth-child 的使用示例教程(css中nth-of-type)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。