编程技术文章分享与教程

网站首页 > 技术文章 正文

CSS3选择器nth-child常规用法都在这,请重点关注第二个连续选择

hmc789 2024-11-09 13:02:41 技术文章 3 ℃

点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

CSS3有太多特性可以关注的,其中nth-child这个选择器就是当中最值得关注的特性之一,之前,我写过一篇文章,当中用了两句话来搞了一下nth-child和nth-of-type的区别, 今天,这篇我们重点来关注一下nth-child的常规应用,看有哪些是你没有用到的。

一, 选择第几个标签

例如选择第2个标签,可以这么搞:

ul li:nth-child(2){color:red}

二,选择小于等于5标签

其中n表示从整数,注意,这个时候用的是-n,如下

效果就是下面这样:

三,选择大于5标签

其中n表示从整数,注意,这个时候用的是n,如下

效果就是下面这样的:

四,选择偶数标签

其中2n也可以是even。

效果下面这样:

五,选择奇数标签

其中2n-1也可以是odd。

效果如下:

六,自定义选取标签(隔二取一)

效果是这样的:

七,选取最后一个标签

ul li:last-child{color:red}

或者选择倒数第几个标签:

ul li:last-child(3){color:red}

最后总结一下:

关于nth-child这些用法,大部分应该都用过,特别要注意第二个连续选取的用法。有时候用对了,会帮你省好多代码。

Tags:

标签列表
最新留言