css - 如果有 x 个元素，则 Css 选择器目标

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)

当同一个 parentspan中恰好有 4 个元素时匹配所有元素。但是您只有一个per ，使每个成为唯一的孩子，而不是四个中的一个。spanlispan

您要做的是在span恰好有 4 个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

更新了 fiddle，你可以看到所有的spans 现在都变成黑色了。