Question

如果有3个div，我希望定位一个规则，如果有4个div，则我想定位另一个规则。

标记

//one set of rules
<div></div>
<div></div>
<div></div>

//second fules
<div></div>
<div></div>
<div></div>
<div></div>

CSS

/* three items */
div:nth-child(1):nth-last-child(3),
div:nth-child(2):nth-last-child(2),
div:nth-child(3):nth-last-child(1)

/* fouritems */
div:nth-child(1):nth-last-child(4),
div:nth-child(2):nth-last-child(3),
div:nth-child(3):nth-last-child(2),
div:nth-child(4):nth-last-child(1)

我跟着这个：http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/，但遗憾的是运气不好。

Answer 1

在你的小提琴中，使用以下选择器：

.stepNav li span:nth-child(1):nth-last-child(4), 
.stepNav li span:nth-child(2):nth-last-child(3), 
.stepNav li span:nth-child(3):nth-last-child(2), 
.stepNav li span:nth-child(4):nth-last-child(1)

匹配所有span个元素时，其中只有4个在同一个父中。但是，每span只有一个li，使每个span成为唯一的孩子，而不是四个中的一个。

您要做的是在恰好有4个span元素时设置li元素的样式，因此您需要移动伪类：

.stepNav li:nth-child(1):nth-last-child(4) span, 
.stepNav li:nth-child(2):nth-last-child(3) span, 
.stepNav li:nth-child(3):nth-last-child(2) span, 
.stepNav li:nth-child(4):nth-last-child(1) span

Updated fiddle，您可以看到所有span s现在都是黑色的。

Css选择器目标，如果x元素

1 个答案: