嵌套div中的nth-child

Question

我正在尝试使用.latest-item隐藏姓名为nth-child的最后3个div：

<div class="latest-group">

            <div class="latest-1 latest-item latest-sort-1">
              <h3>Title</h3>
              <p>Paragraph</p>
            </div><!--end latest-1-->

            <div class="latest-2 latest-item latest-sort-2">
              <h3>Title</h3>
              <p>Paragraph</p>
            </div><!--end latest-2-->

            <div class="latest-3 latest-item latest-sort-3">
              <h3>Title</h3>
              <p>Paragraph</p>
            </div><!--end latest-3-->

          </div><!--end latest-group-->

          <div class="latest-group">

            <div class="latest-4 latest-item latest-sort-1">
              <h3>Title</h3>
              <p>Paragraph</p>
            </div><!--end latest-4-->

            <div class="latest-5 latest-item latest-sort-2">
              <h3>Title</h3>
              <p>Paragraph</p>
            </div><!--end latest-5-->

            <div class="latest-6 latest-item latest-sort-3">
              <h3>Title</h3>
              <p>Paragraph</p>
            </div><!--end latest-6-->

          </div><!--end latest-group-->​

和CSS：

.latest-item:nth-child(n+3) { 
           display:none;
       }​

我无法正确定位类名为.latest-item的div。在jQuery中我可以做类似的事情：

  

$（ “最新项目。”）片（3）.hide（）;

这是一个小提琴：

http://jsfiddle.net/nMbm5/

Answer 1

我认为您需要使用nth-last-child和last-child代替：http://jsfiddle.net/nMbm5/1/

Answer 2

听起来这是目前CSS的一个缺点。改为使用javascript：

$(".latest-item").slice(3).hide();