1

2 つのボタンを持つシンプルなメニューがあり、各ボタンはドロップダウンです。それぞれに 2 つのサブボタンが表示されます。以下の CSS からわかるように、各サブアイテムを異なる背景色にしたいと考えています。

#nav:first-child > li li:first-child {background: yellow;}
#nav:first-child > li li:nth-child(2) {background: red;}
#nav:nth-child(2) > li li:first-child {background: green;}
#nav:nth-child(2) > li li:nth-child(2) {background: blue;}

これまでのところ、私の CSS は最初のサブボタンに対してのみ機能します。サブボタン 1 は黄色、サブボタン 2 は赤です。残念ながら、サブボタン 3 は緑ではなく黄色で、サブボタン 4 は青ではなく赤です。最後の 2 行のコードを変更して、目的の結果を得るにはどうすればよいですか?

**注意してください、ドロップダウンはネストされた LIST です。以下の HTML の例:

<div id="nav">
   <ul>
      <li>link 1
          <ul>
             <li>SUB link 1</li>
             <li>SUB link 2</li>
         </ul>
      </li>
      <li>link 2
         <ul>
             <li>SUB link 3</li>
             <li>SUB link 4</li>
         </ul>
      </li>
   </ul>
</div>
4

3 に答える 3

4

IE7-8 のサポート

あなたは最初から使っ:nth-childていましたが、それらのブラウザーではサポートされていません。そのため、あなたがそのようなサポートを気にしていないように見えたので、回答者がサポートを気にしなかった理由がわかります。ただし、それらに対してセレクターを機能させることができます。in キーポイントで隣接兄弟コンビネータ+を使用すると、:first-child:nth-child(2)

フィドルを参照してください。

ul li:first-child > ul li:first-child {background: yellow;}
ul li:first-child > ul li + li {background: red;}
ul li:first-child + li > ul li:first-child {background: green;}
ul li:first-child + li > ul li + li {background: blue;}

IE6

IE6liは:first-childや+. _ 個人的には、カラーバリエーションに関してはIE6を手放したほうがいいです。あなたが主張し、それを介してセレクター機能を取得するためにjavascriptを使用したくない場合は、htmlを変更する必要があります。

<div id="nav">
   <ul>
      <li>link 1
          <ul>
             <li class="one">SUB link 1</li>
             <li class="two">SUB link 2</li>
         </ul>
      </li>
      <li>link 2
         <ul>
             <li class="three">SUB link 3</li>
             <li class="four">SUB link 4</li>
         </ul>
      </li>
   </ul>
</div>

これとともに

.one {background: yellow;}
.two {background: red;}
.three {background: green;}
.four {background: blue;}

もちろん、これはcss をサポートするすべてのブラウザーで機能します。しかし、それはあなたがやりたいと思っていることでもありません。繰り返しますが、IE6 をそのままにして、その色の変更に対応することを忘れるか、JavaScript を使用して (おそらくModernizr、Jquery、MooToolsなどを介して) それを行います。

于 2013-01-21T18:56:04.440 に答える
3

およびは、SUB リンクであるタグに適用する必要がありfirst-childます。nth-childli

ul li:first-child > ul li:first-child {background: yellow;}
ul li:first-child > ul li:nth-child(2) {background: red;}
ul li:nth-child(2) > ul li:first-child {background: green;}
ul li:nth-child(2) > ul li:nth-child(2) {background: blue;}

これにより、望ましい結果が得られます。

http://jsfiddle.net/JDp3j/

于 2013-01-15T22:35:48.403 に答える
0

ああ..ここにあります..良いもの.. http://selectivizr.com/

于 2013-01-21T18:30:52.640 に答える