2

我正在尝试使用第 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小提琴

4

5 回答 5

11

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

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

小提琴

于 2013-04-19T09:44:02.300 回答
2

有一个简单的技巧：

首先：为你的排队的<div>s设置全局颜色

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

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

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

享受！

于 2015-07-23T06:36:17.823 回答
1

@Francesca 这是 css-trikes 的 :nth tester 的一个简单而出色的工具，它使选择器css-tricks nth-child-tester的生活更轻松

于 2013-04-19T09:58:08.277 回答
1

扩展 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; 
 }

修改后的演示

（跳过第 5 项）

于 2013-04-19T18:30:59.773 回答
0

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

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

该解决方案将每个孩子都:nth-of-type用作:nth-child计数，无论其班级如何。

于 2013-04-19T10:38:13.617 回答