注：這個(gè)解決scheme將返回一定長度的子集，而不是你所要求的父元素。 希望它仍然有用。

安德烈·路易斯提出了一個(gè)方法： http : //lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/不幸的是，它只適用于IE9及以上。

本質(zhì)上，你將nnth-child()與其他處理元素位置的偽類結(jié)合起來。 這種方法允許您從具有特定長度的元素集合中指定元素。

例如:nth-child(1):nth-last-child(3)匹配集合中的第一個(gè)元素，同時(shí)也是集合的結(jié)尾的第三個(gè)元素。 這樣做有兩個(gè)方面：保證集合只有三個(gè)元素，而我們有三個(gè)元素中的第一個(gè)元素。 要指定三個(gè)元素集的第二個(gè)元素，我們使用:nth-child(2):nth-last-child(2) 。

示例1 – 如果set包含三個(gè)元素，則select所有列表元素：

li:nth-child(1):nth-last-child(3), li:nth-child(2):nth-last-child(2), li:nth-child(3):nth-last-child(1) { width: 33.3333%; }

來自Lea Verou的示例1替代scheme ：

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

示例2 – 使用三個(gè)列表元素指定集合的??最后一個(gè)元素：

li:nth-child(3):last-child { /* I'm the last of three */ }

例2替代：

li:nth-child(3):nth-last-child(1) { /* I'm the last of three */ }

示例3 – 以四個(gè)列表元素為目標(biāo)的第二個(gè)元素：

li:nth-child(2):nth-last-child(3) { /* I'm the second of four */ }

總結(jié)

以上是生活随笔為你收集整理的css找某个元素的下个子元素,CSS可以检测一个元素有多less个子元素？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。