1

我有一个带有两个按钮的简单菜单，每个按钮都是一个下拉菜单；每个显示两个子按钮。我希望每个子项都具有不同的背景颜色，正如您从下面的 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 仅适用于第一个子按钮；子按钮一为黄色，子按钮二为红色。不幸的是，子按钮三是黄色而不是绿色，子按钮四是红色而不是蓝色。如何更改我的最后两行代码以达到预期的结果？

**请记住，下拉列表是一个嵌套列表。下面的 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的是那些浏览器不支持的，所以我可以理解为什么回答的人不关心支持，因为看起来您似乎不关心这种支持。但是，可以使选择器适用于那些。将相邻的兄弟组合器+与:first-childin 关键点一起使用会产生与: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

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

于 2013-01-21T18:56:04.440 回答
3

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/

于 2013-01-15T22:35:48.403 回答
0

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

于 2013-01-21T18:30:52.640 回答