关闭

CSS 选择器nth-child的几种用法

时间: 2019-12-20阅读: 736标签: 选择器

在开发过程中,会碰到一些选择器的需求:

例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . .  等等。

我们可以通过 css 来实现这样的效果,css 给我们提供了几个样式参数:first-child、last-child、nth-child(n)。

下面介绍它们的使用方法:

first-child first-child:选择列表中的第一个标签。

举例:第一行字体显示为红色,代码如下:

li:first-child{
    color: red;
}

last-child last-child:选择列表中的最后一个标签。

举例,最后一行字体显示为绿色,代码如下:

li:last-child{
    color: green;
}

nth-child(n) nth-child(n):选择列表中的第 n 个标签。

举例:第三行字体显示为蓝色,代码如下:

li:nth-child(3){
    color: blue;
}

nth-child(odd) nth-child(odd):选择列表的奇数行。

举例,奇数行背景显示为灰色,代码如下:

li:nth-child(odd){
    background: #999;
}

我们可以通过另外的方法选择奇数行,例如: nth-child(n+1) 、 nth-child(2n-1) 等。

代码如下:

/*First*/
li:nth-child(n+1){
    background: #999;
}
/*Second*/
li:nth-child(2n-1){
    background: #999;
}

nth-child(even) nth-child(even):选择列表的偶数行。

举例:偶数行背景显示为土黄色(不要在意那些细节),代码如下:

li:nth-child(even){
    background: #F6E0AF;
}

同样,我们可以通过另外的方法选择奇数行,例如: nth-child(2n) 。

代码如下:

li:nth-child(2n){
    background: #F6E0AF;
}

上面的几种方法运行效果如下图:


上面是几种比较常见的选择方法,我们还可以通过 CSS 更灵活的进行选择,有下面几种方法:

nth-child(-n+n) nth-child(-n+n):选择第 n 个之前的元素(此处的 n 是后面的那个,下同)。

举例:前三行背景色设置为绿色,代码如下:

li:nth-child(-n+3){
    background: #2cae1d;
}

nth-child(n+n) nth-child(n+n):选择第 n 个之后的元素。

举例:第五行及以后背景色设置为蓝色,代码如下:

li:nth-child(n+5){
    background: #0ab1fc;
}

nth-last-child(n) nth-last-child(n):选择倒数第 n 个元素。

举例:倒数第三元素字体设置为红色,代码如下:

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

同样可以使用上面的方法进行拓展,方法如下:

nth-last-child(n+n) nth-last-child(n+n):选择倒数第 n 个之前的元素。

举例:倒数第三个及之前的元素字体设置为粗体,代码如下:

li:nth-last-child(n+3){
    font-weight: bold;
}

上面的几种方法运行效果如下图:


nth-last-child(3n) nth-last-child(3n):选择第 3、6、. . .  个元素,选择三的倍数。

举例:第3、6、 . . .  三的倍数行背景色设置为橙色,代码如下:

li:nth-child(3n){
    background: orange;
}

nth-last-child(3n+1) nth-last-child(3n+1):选择第 1、4、7 个元素,从第一个开始每个递增三个。

举例:第1、4、7 . . .  行背景色设置为红色,代码如下:

li:nth-child(3n+1){
    background: red;
}

上面的几种方法运行效果如下图:


当然,可能还有更多的使用方法,我在这只是简单的记录一下我常用的几种,也希望大家能够举一反三,能在项目中更好的利用起来。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8309

关闭

CSS3 中关于 *-of-type 和 *-child的差异性及适用场景

CSS3 中有很多表示元素序号的选择器,有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child

微信小程序文档没写支持, 但是实际支持的选择器有哪些?

目前支持的选择器有,在实践中我发现, 除了文档上说的几种选择器, 经过测试发现其实还有几种支持的选择器没有列举!还支持哪些选择器?

css节点选择器

基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别:ID选择器,标签选择器,类选择器,属性选择器,通配选择器

vue中能穿透组件的css选择器

如果父组件style设置了scoped,除了全局样式与子组件内部修改样式以外不受外部样式的影响,但要是父组件想修改子组件某个地方的样式但又不想为了这么一点变动去添加个全局样式该怎么做呢?

css选择器总结_30个CSS3选择器

总结30个CSS3选择器:*选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法。

CSS选择器:nth-child()和:nth-of-type()的使用

今天就讲一下css选择器:nth-child()和:nth-of-type()的使用。:nth-child()和:nth-of-type()的支持度,所有主流浏览器均支持:nth-child()和:nth-of-type()选择器,除了 IE8 及更早的版本。

CSS选择器与CSS的继承,层叠和特殊性

.类选器名称{css样式代码;}这样的类选择器在css样式编码中是最常用到的,注意:1.英文圆点开头2.其中类选器名称可以任意起名(但不要起中文);除此之外,还有ID选择器,不过在很多方面,ID选择器都类似于类选择符

jQuery :eq() 选择器

:eq() 选择器选取带有指定 index 值的元素。 index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素

css兄弟选择器(+ 和 ~)的使用和区别

这篇文章主要讲解css中兄弟选择器的使用,以及+和~的区别有哪些?+ 选择器:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。 ~ 选择器:作用是查找某一个指定元素的后面的所有兄弟结点。

jQuery选择器

选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器。不仅能简化代码,而且可以达到事半功倍的效果.jQuery的优点:1.简洁的语法,2.完善的事件处理机制

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!