CSS中nth-child 的使用示例教程
我要評(píng)論nth-child
nth-child 選擇器 選擇指定選擇器的父元素下的 指定選擇器元素如 .nthC:nth-child(n){} 選擇的是 當(dāng)前.nthC class類(lèi)元素的父元素 的所有 含有.nthC的子元素注意：如果.nthC類(lèi)同級(jí)元素中含有不包含.nthC類(lèi)的元素 該元素還是會(huì)占位 會(huì)影響.nthC的nth-child選擇器，其不受.nthC的nth-child的影響
使用 nth-child(n) 方式 n>=1 時(shí)生效。css計(jì)算時(shí) n 從0開(kāi)始計(jì)算。
例子 1 不包含.nthC類(lèi)的元素 不受影響
//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同級(jí)的元素中 第二個(gè)沒(méi)class的元素沒(méi)有變紅色
例子 2 不包含.nthC類(lèi)的元素 會(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ù)?？墒桥c.nthC同級(jí)的元素中 第二個(gè)元素沒(méi)有.nthC類(lèi)，所以不受.nthC:nth-child的影響，但是由于它還是在同級(jí)中占位了所以 會(huì)影響到 .nthC:nth-child的選擇
為了防止出現(xiàn)選擇器選擇錯(cuò)誤 一般使用nth-child所有的同級(jí)元素都需要包含相同的class類(lèi) 這樣插入的新元素 也包含相同的class類(lèi) 就不會(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
詳解CSS nth-child與nth-of-type的元素查找方式
這篇文章主要介紹了詳解CSS nth-child與nth-of-type的元素查找方式的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-22使用css屬性:nth-child(n)匹配選擇第n個(gè)子元素
css匹配選擇第n個(gè)子元素可以使用:nth-child(n) 選擇器，其匹配屬于其父元素的第N個(gè)子元素，不論元素的類(lèi)型2014-07-29css :nth-child與:nth-of-type之小解
css :nth-child與:nth-of-type之小解,需要的朋友可以參考下。2011-10-07
