Question

我有一个带有两个按钮的简单菜单，每个按钮都是一个下拉菜单;每个显示两个子按钮。我希望每个子项目都是不同的背景颜色，您可以从我的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是红色而不是蓝色。如何更改最后两行代码以获得所需的结果？

**请记住，下拉列表是嵌套的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>

Answer 1

IE7-8支持

你开始使用:nth-child，这些浏览器不支持，所以我可以看到为什么回答的人不关心支持，因为看起来你不关心这种支持。但是，选择器可以用于那些。在关键点中使用相邻的兄弟组合+与:first-child创建与:nth-child(2)相同的效果

See Fiddle.

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

如果没有javascript或直接在每个li元素上放置类，则无法获得IE6支持，因为IE6不支持: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等）来实现它。

Answer 2

first-child和nth-child应该应用于作为SUB链接的li标记。

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/

Answer 3

哦..这是......好东西.. http://selectivizr.com/

带有下拉列表的菜单列表的CSS nth-child

3 个答案:

IE7-8支持

IE6