通过 CSS3 根据子元素数量为其定义不同样式

在 LEA VEROU 的博客翻到这么一篇文章——《Styling children based on their number, with CSS3》。原文谈到使用“:nth-child 伪类元素选择器”的方法在 2009 年被提出,LEA VEROU 又通过普通相邻选择器(General sibling combinator[1])改良了一下。最终的代码很酷。

内容介绍

标题写的有些拗口,看看下面的例子应该可以明白。主要作用是无论父元素有多少子元素,都根据子元素的数量设定样式,而无需使用任何 class。

主要代码

/* one item */
li:first-child:nth-last-child(1) {
	width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
	width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
	width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
	width: 25%;
}

li:first-child:nth-last-child()部分,:first-child选择了第一个子元素,:nth-last-child()用来判断这个元素属于“几个之一”。li:first-child:nth-last-child(3)即选择属于倒数第三个li的同时还是第一个元素的情况,即共 3 个子元素时的第一个。

li:first-child:nth-last-child() ~ li通过普通相邻选择器为第二个之后的所有元素设定样式[2]

同 table 的区别

实现类似效果的方法当然不只这一种,最常用的就是表格。LEA VEROU 指出了两点不同之处:

  1. 表格有着特别的含义,有时并不符合我们需要的语义;
  2. 表格对宽度的控制没有上面的灵活(例如上面的方法可以实现子元素不完整填充父元素)。

使用范围

:nth-last-child 浏览器支持

由于 :nth-child 直到 IE9 才被支持,所以这个技术在移动端使用更加安全。

相关链接

  1. 普通相邻选择器(General sibling combinator)[1]W3C 相关文档
  2. a~b 和 a+b 的区别[2]W3C 相关文档
此条目发表在 前端开发 分类目录,贴了 , 标签。将固定链接加入收藏夹。

通过 CSS3 根据子元素数量为其定义不同样式》有 10 条评论

  1. 琼台博客 说:

    还是要靠js一些算法才能灵活!

  2. 这篇确实是技术文,对我这种不懂编程和设计的人来说,看不懂。你的主题实在炫呀。

  3. interjc 说:

    jsfiddle 的这种用法很不错啊

  4. 蒙奇奇 说:

    css3有不少功能值得探索,这又是其中一点,学海无涯啊

  5. 王端端 说:

    这个方法 表格也同样适用吗 那怎么样为表格根据子元素数量为其定义不同样式

  6. yjl 说:

    好英语 万岁

    博主教英语不

  7. 九三年 说:

    楼主,这个好像可以去掉:first-child这个属性啊,因为选择器:nth-last-child(n),会根据n的值去选择,如果只有三个元素,那个就会匹配:nth-last-child(3),而不匹配:nth-last-child(4)。我试了以下那样子也可以,是不是有什么考虑不周的还望指教:
    /* three items */
    li:nth-last-child(3),
    li:nth-last-child(3) ~ li {
    width: 33.3333%;
    }

    /* four items */
    li:nth-last-child(4),
    li:nth-last-child(4) ~ li {
    width: 25%;
    }

    • Sivan 说:

      如果有4个元素,只用 :nth-last-child(3) 就能匹配到倒数第三个(正数第二)个,会识别成总共有3个元素了。这个选择器的模式就是通过:首个元素&&恰好是倒数第n个,来判断总共有几个元素。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

1 + 3 =