详解CSS中:nth-child的用法

我不是女神ヾ 2022-06-13 08:56 258阅读 0赞

前端的哥们想必都接触过css中一个神奇的玩意，可以轻松选取你想要的标签并给与修改添加样式，是不是很给力，它就是“:nth-child”。

下面我将用几个典型的实例来给大家讲解:nth-child的实际用途：

Tips：还用低版本的IE浏览器的哥们请绕过！

## :nth-child(2)选取第几个标签，“2可以是你想要的数字” ##

.demo01 li:nth-child(2){
       background:#090}

## :nth-child(n+4)选取大于等于4标签，“n”表示从整数，下同 ##

[点此查看实例展示][Link 1]

.demo01 li:nth-child(n+4){
       background:#090}

## :nth-child(-n+4)选取小于等于4标签 ##

[点此查看实例展示][Link 1]

.demo01 li:nth-child(-n+4){
       background:#090}

## :nth-child(2n)选取偶数标签，2n也可以是even ##

[点此查看实例展示][Link 1]

.demo01 li:nth-child(2n){
       background:#090}

## :nth-child(2n-1)选取奇数标签，2n-1可以是odd ##

[点此查看实例展示][Link 1]

.demo01 li:nth-child(2n-1){
       background:#090}

## :nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一” ##

[点此查看实例展示][Link 1]

.demo01 li:nth-child(3n+1){
       background:#090}

## :last-child选取最后一个标签 ##

[点此查看实例展示][Link 1]

.demo01 li:last-child{
       background:#090}

## :nth-last-child(3)选取倒数第几个标签,3表示选取第3个 ##

[点此查看实例展示][Link 1]

.demo01 li:nth-last-child(3){
       background:#090}

ok，:nth-child的这些用法在实际中很用得着，不用单独给需要选取的标签加上ID或Class，是不是很拉轰！

AD： 【优秀主题】 [tob主题正式发布，够炫酷！ 完美的自适应布局，完善的图片站配置][tob_]

[Link 1]: http://www.daqianduan.com/example/?pid=3737
[tob_]: https://themebetter.com/theme/tob

发表评论取消回复

表情：

评论列表（有 0 条评论，258人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS中position属性的用法

CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right

阳光穿透心脏的1/2处/ 2023年06月24日 08:08/ 0 赞/ 40 阅读

相关 css中 base 标签用法

base标签作用就是管理页面中所有a标签的跳转功能属性 <base href="http:www.baidu.com" taget="_blank"> 如果这样设置

布满荆棘的人生/ 2022年12月17日 03:25/ 0 赞/ 199 阅读

相关在css中 z-index 的用法

> > > > 终于彻底明白 position及z-index的用法 > > static : 　无特殊定位，对象遵循HTML定位规则 > > absolute

心已赠人/ 2022年08月06日 00:26/ 0 赞/ 185 阅读

相关 css3中的border-image用法

[css3\_快速弄明白border-image][css3_border-image] [鑫空间链接—][Link 1] [ CSS3 bord

水深无声/ 2022年07月16日 13:08/ 0 赞/ 242 阅读

相关 css3中的skew的用法

skew(xdeg,ydeg);用于斜拉变换。当只有一个参数时，第二个参数为0. [链接][Link 1] [Link 1]: http://zyxn.bl

以你之姓@/ 2022年06月18日 00:51/ 0 赞/ 246 阅读

相关 css3中transform-style的用法

设置内嵌的元素在 3D 空间如何呈现。 transform-style:flat(默认)|perserve-3d [链接1][1] [例子1][1 1]

深藏阁楼爱情的钟/ 2022年06月18日 00:45/ 0 赞/ 229 阅读

相关详解CSS中:nth-child的用法

前端的哥们想必都接触过css中一个神奇的玩意，可以轻松选取你想要的标签并给与修改添加样式，是不是很给力，它就是“:nth-child”。下面我将用几个典型的实例来给大家讲解

我不是女神ヾ/ 2022年06月13日 08:56/ 0 赞/ 259 阅读

相关 css中的vertical-align用法

vertical-align分类： 1.线类：baseline top middle bottom 2.文本类: text-top text-bottom 3.上

向右看齐/ 2022年06月09日 04:26/ 0 赞/ 223 阅读

相关 css3 中的calc用法

定义与用法 calc() 函数用于动态计算长度值。 1.需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 2.

柔光的暖阳◎/ 2022年05月21日 04:23/ 0 赞/ 292 阅读

相关 Css中路径data用法

`Data URI scheme`是在`RFC2397`中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。 data:,文本数据 d

清疚/ 2021年07月04日 13:41/ 0 赞/ 482 阅读