Question

我试图用第n个孩子来选择其他所有两个div。

这意味着，当有一个div 1,2,3,4,5和6的集合时 - 我需要选择1,2,5和6.其他两个。

CSS：

#navigation .menuItem:nth-child(3n+3) {  
  background-color: #ccc;
}

HTML：

<div class="menuItemWrapper">
            <div class="menuItem"><a href="shop.html">Shop Online</a></div>
            <div class="menuItem"><a href="blog.html">The Blog</a></div>
            <div class="menuItem"><a href="lookbook.html">LookBook</a></div>
            <div class="menuItem"><a href="gift-finder.html">Gift Finder</a></div>
            <div class="menuItem"><a href="about.html">About Us</a></div>
            <div class="menuItem sub"><a href="freebies.html">Tutorials</a></div>
            <div class="menuItem sub"><a href="faq.html">FAQ</a></div>
            <div class="menuItem sub"><a href="contact.html">Contact</a></div>

JS Fiddle

Answer 1

您将无法使用单个选择器执行此操作，但您可以使用两个选择器：

#navigation .menuItem:nth-child(4n+1), #navigation .menuItem:nth-child(4n+2) {
  background-color: #ccc;
}

Fiddle

Answer 2

@Francesca这里有一个简单而强大的工具：cth-trickes的第n个测试人员，它使选择者的生活更轻松css-tricks nth-child-tester

Answer 3

扩展Chowlett的响应以管理“跳过”元素的可能性。

将你想要皮肤的元素从div更改为nav（这几乎是相同的）。

使用nth-of-type选择器而不是nth-child引用它们。并使选择器更具体，以避免更改导航的背景

.menuItemWrapper div.menuItem:nth-of-type(4n+1), 
.menuItemWrapper div.menuItem:nth-of-type(4n+2) {
     background-color: #ccc; 
 }

modyfied demo

（跳过第5项）

Answer 4

有一个简单的黑客：

首先：为排队的<div>

设置全局颜色

.menuItemWrapper>div { background-color: #fff; }

其次：选择每个第4个元素并在其后直接应用替代背景<div>元素。这使得成对。 -1从正确的地方开始。

.menuItemWrapper>div:nth-child(4n-1) { background-color: #ccc; }
.menuItemWrapper>div:nth-child(4n-1)+div { background-color: #ccc; }

享受！

Answer 5

我认为我根据Chowlett的建议找到了解决问题的方法：http://jsfiddle.net/Z8Uxt/10/。

你需要的是将分隔符更改为不同的元素类型（例如：p而不是div或者甚至是语义div而不是li）。

该解决方案使用:nth-of-type作为:nth-child计算每个孩子，无论其类别如何。

使用第n个孩子来定位每个其他两个div

5 个答案:

modyfied demo