CSS3选择器最后一个不属于类X的元素

Question

我正在尝试设置不属于X类的Y类的最后一个元素。 示例HTML：

<div class="container">
  <div class="Y"></div>
  <div class="Y"></div> <!-- this I want to style -->
  <div class="X Y"></div>
</div>

我试过了两次

.Y:not(.X):last-child

和

.Y:not(.X):last-of-type

但它们不能在Chromium中产生所需的结果。我想知道它是否可以在CSS3中完成......

Answer 1

您可以使用以下规则直接选择元素：

div.container > div:nth-child(2)

否则，如果您知道最后一个div.y始终连续到div.x.y然后到达父节点的末尾，您可以使用以下规则选择它：

div.container > div:nth-last-child( 2 )

Answer 2

目前无法通过CSS选择器进行此操作。

CSS选择器级别4中所需的行为仅为specified，您可能需要的是:not(.X):nth-last-match(1, .Y)，但目前没有浏览器支持它。

所以，最好的解决方案是使用jQuery作为@BoltClock在评论中写道或在html中生成所需的类。

Answer 3

你可以尝试

.Y:nth-last-child(-n+3) + :not(.X)
//or 
.Y:nth-last-child(-n+3) + div[class="Y"]

编辑：它可以使用随机数的元素。检查jsfiddle http://jsfiddle.net/brMWw/1/