:nth-child()结构伪类选择器使用详解

 时间:2024-10-13 11:38:19

1、先完成一个用来实验:nth-child()的基本HTML样式与结构,代码及预览效果如下所示:

:nth-child()结构伪类选择器使用详解:nth-child()结构伪类选择器使用详解:nth-child()结构伪类选择器使用详解

2、如果n表示一个具体数值3,则会选择某元素下的第3个子元素,如下所示:

:nth-child()结构伪类选择器使用详解:nth-child()结构伪类选择器使用详解

3、如果就是一个n,将会选中父元素的所有子元素,如下所示:

:nth-child()结构伪类选择器使用详解:nth-child()结构伪类选择器使用详解

4、如果n是一个表达式2n,则表示所有的偶数项都会被选中,如下所示:

:nth-child()结构伪类选择器使用详解:nth-child()结构伪类选择器使用详解

5、如果n是一个表达式2n+1,则表示所有的奇数项都会被选中,如下所示:

:nth-child()结构伪类选择器使用详解:nth-child()结构伪类选择器使用详解

6、如果n是一个表达式n+5,则表示从第5个子元素开始一直到最后的子元素都会被选中,如下所示:

:nth-child()结构伪类选择器使用详解:nth-child()结构伪类选择器使用详解

7、如果n是一个表达式-n+5,则表示选择父元素的第1个到第5个子元素,它和n+5正好相反,如下所示:

:nth-child()结构伪类选择器使用详解:nth-child()结构伪类选择器使用详解

8、以上就是结构伪类选择器:nth-child()最常用的几种方式,希望对大家有所帮助。

  • FLASH帧频设置
  • 如何在手机版京东中修改配送时间
  • 如何制作穿出屏幕的效果?
  • 夜景灯光朦胧的效果怎么制作
  • Axure如何实现复选框全选和反选
  • 热门搜索
    婴儿几个月可以吃盐 小孩受凉呕吐怎么办 中国十大旅游景点 文科生可以报哪些专业 信怎么写格式 力士洗发水怎么样 泉州旅游必去十大景点推荐 永康旅游 鲅鱼圈旅游攻略 孕吐吃什么可以缓解