CSS中nth-child 的使用示例教程
我要评论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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
详解CSS nth-child与nth-of-type的元素查找方式
这篇文章主要介绍了详解CSS nth-child与nth-of-type的元素查找方式的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-22使用css属性:nth-child(n)匹配选择第n个子元素
css匹配选择第n个子元素可以使用:nth-child(n) 选择器，其匹配属于其父元素的第N个子元素，不论元素的类型2014-07-29css :nth-child与:nth-of-type之小解
css :nth-child与:nth-of-type之小解,需要的朋友可以参考下。2011-10-07
最新评论