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   团队充值 1 团队充值 2 团队充值 3 团队充值 4 团队充值 5 团队充值 6 //css .nthC:nth-child(n) { color: red !important; }

结果

可以看出与.nthC同级的元素中 第二个没class的元素没有变红色

例子 2 不包含.nthC类的元素 会占据nth-child的计算位置

//html   团队充值 1 团队充值 2 团队充值 3 团队充值 4 团队充值 5 团队充值 6 //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使用内容请搜索0133技术站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持0133技术站！