Question

<div class="boxcontent">

<div>some content this div may be missing [dynamic genrated]</div>

<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>

<div class="boxcontent">


<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>


<div class="boxcontent">


<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>

我发现了一个问题，当我使用css3选择器nth-child（3）选择它们时，他们会在第一个.boxcontnent div中选择第二个div。

当我最后一次说到这一点时，但从未感觉到我在这里的问题是观点：

http://jsfiddle.net/szz3C/1/

我想选择第3个div或所有boxcontent类div，但在第一个框中我找到了第二个div而不是第三个。

是他们的任何解决方案，即使使用css3或jQuery解决这个问题，感谢支持，如果有人能解决这个问题

Answer 1

试试这个CSS：

div:nth-of-type(3) { ... }

Answer 2

没有好的“第3类”选择器（或任何其他基于类的选择器，它们都是 sibling ，包括类型）。

这里最好的选择（给定示例）:nth-last-child()，.box <div> 如果它是其父级中的最后一个孩子，就像这样：

div.box:nth-last-child(1){ background-color:green; }

You can try it out here

Answer 3

你可以尝试

.boxcontent .elem+.elem+.elem { /*3rd .elem*/ }
.boxcontent .elem+.elem+.elem+.elem { /*reset css if there are 4 .elem divs*/ }

还有:last-child选择器

Answer 4

我猜你可以使用：last-child除了IE8及以下版本之外的所有内容。使用Jquery来覆盖它？

$(".boxcontent:last-child").css({color:"red"});

但我不相信javascript会对结构做任何重要的事情。

http://www.quirksmode.org/css/contents.html

如何选择具有特定css类的第3个div

4 个答案: