使用第n个孩子每隔两个div目标(Using nth child to target every o

我试图用第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小提琴

Answer 1:

您将无法使用单个选择这样做，但你可以有两个：

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

小提琴

Answer 2:

这里@Francesca是一个简单的，真棒工具：第n次测试由CSS-trickes，它使生活更容易选择CSS-技巧第n个孩子测试仪

Answer 3:

扩大从Chowlett响应管理posibility“跳过”元素。

更改要由格至皮肤NAV元素（这将是几乎相同）。

通过使用第n-的类型选择，而不是第n个孩子中引用它们。 并把选择器更具体的，以避免改变的NAV的背景

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

modyfied演示

（第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或者甚至语义格，而不是利）。

该解决方案采用:nth-of-type为:nth-child不管其类的计数每一个孩子。

文章来源: Using nth child to target every other TWO divs