使用第n个孩子来定位每两个其他的div [英] Using nth child to target every other TWO divs

问题描述

这意味着，当有一个divs 1，2，3，4的集合，5和6 - 我需要选择1，2，5和6.每隔两个。

CSS：

$ b b

  #navigation .menuItem：nth-​​child（3n + 3）{
 background-color：#ccc; 
} 
  

HTML：

 < div class =menuItemWrapper> 
< div class =menuItem>< a href =shop.html>在线商店< / a>< / div> 
< div class =menuItem>< a href =blog.html>博客< / a>< / div> 
< div class =menuItem>< a href =lookbook.html> LookBook< / a>< / div> 
< div class =menuItem>< a href =gift-finder.html>礼品搜索< / a>< / div> 
< div class =menuItem>< a href =about.html>关于我们< / a>< / div& 
< div class =menuItem sub>< a href =freebies.html>教程< / a>< / div> 
< div class =menuItem sub>< a href =faq.html>常见问题< / a>< / div> 
< div class =menuItem sub>< a href =contact.html> Contact< / a>< / div> 
  

JS Fiddle

解决方案

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

  #navigation .menuItem：nth-​​child（4n + 1），#navigation .menuItem：nth-​​child +2）{
 background-color：#ccc; 
} 
  

小提琴

I'm trying to use nth child to select every other TWO divs.

This means, when there is a collection of divs 1, 2, 3, 4, 5, and 6 - I need to select 1, 2, 5 and 6. Every other two.

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

解决方案

You won't be able to do it with a single selector, but you can with two:

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

Fiddle

这篇关于使用第n个孩子来定位每两个其他的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！