章节
问答
课签
笔记
评论
占位
占位

CSS3 结构性伪类选择器—nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。

经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。如下表所示:

案例演示

  通过“:nth-child(n)”选择器,并且参数使用表达式“2n”,将偶数行列表背景色设置为橙色。

HTML代码:

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>​

CSS代码:

ol > li:nth-child(2n){
  background: orange;
}

演示结果:

任务

在右边CSS编辑器中第一行输入正确的代码,让奇数行背景色变成绿色。

?不会了怎么办

nth-child标签是否书写正确

||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
ol > li?{
background:
      green;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / yipp
对父元素中所有子元素进行遍历,子元素个数假如有M个,n的值为从0开始,然后计算表达式的值,如果落在1到元素的总数之间有效,其它无效。往下n的值依次增1继续进行计算,直到计算出表达式的值不在1到M之间就不再算了。

最新回答 / someOne_forward
n=0时不会有效果,n=1是代表第一个,以此类推。2n:0 2 4... ,0不算,所以从第2个元素开始,然后是4,6。。。

最新回答 / Owlapollo
好了,我学到后面自己发现原因了,第一:  在ol:nth-child(),这里ol后面如果有空格,就代表ol下面的子节点,不加就代表ol本身就为子节点,当为1时,整个列表下的子元素都修改了效果;第二: ol>li:nth-child(n)里的n代表子节点的位置,而前面的类型“li”代表的是属于这个类型的才执行效果。

最赞回答 / hallo__world
ol>li:nth-child(-n+3),上面一个是错的,亲测

已采纳回答 / qq_浅墨_1
n的值从0开始1,2,3,4,5n只代表n自己的值nth-child(n)的运行结果是nth-child(0),nth-child(1),nth-child(2),nth-child(3)……nth-child(2n)的运行结果是nth-child(0),nth-child(2),nth-child(4),nth-child(6)……nth-child(2n+1)的运行结果是nth-child(1),nth-child(3),nth-child(5),nth-child(7)……

最赞回答 / 慕仰1053334
这个提问我是服的 无话可说

最赞回答 / 慕粉2236556370
因为要选出奇数行,n+1可能是偶数和奇数,2n+1一定是奇数,还可以用2n-1

已采纳回答 / 么摩抹墨卡卡
有了type即类别 ,比方说在下父元素有许多子元素的情况,找到特定类别的元素进行操作 像div 或者li 又span......

最新回答 / sherryliu
刚想到一个解释,<div class="first”>作父元素,子元素有“second” p3 p4 p5(希望你们看得懂),符合2n+1的位置的是“second”和p4,由于选的是p元素,所以这一选择中p4变红,second不变;<div class="second">作父元素,子元素有h1和p2,p2不在2n+1的位置上,故两个都不变;<h1 class="third">做父元素,子元素有p1,在2n+1的位置上,变红。是这样吗?我都怀疑我是不是真的理解父元素的意思...

已采纳回答 / rainy_day
你试试这样可以不:.nav ul li:nth-child(2n+1) a:hover

最新回答 / 无所畏惧小小小
我们编程默认是用英文输入法,[]方括号可以表示数组,()可以表示用来传参,{}大括号一般是代表一段函数的起始与结束。
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言