2

n 番目の子を使用して、他の 2 つの 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

2

これには簡単なハックがあります：

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

楽しみ！

于 2015-07-23T06:36:17.823 に答える
1

要素を「スキップ」する可能性を管理するために、Chowlett からの応答を拡張します。

スキンを適用する要素を div から nav に変更します (これはほとんど同じです)。

nth-child の代わりに nth-of-type セレクターを使用して参照してください。ナビゲーションの背景を変更しないように、セレクターをより具体的にしました

.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/。

必要なのは、仕切りを別の要素タイプに変更することだけです (例: div の代わりに p を、または li の代わりにセマンティック div を使用することもできます)。

このソリューションでは、クラスに関係なく、すべての子をカウント:nth-of-typeとして使用します。:nth-child

于 2013-04-19T10:38:13.617 に答える