Question

我有一个嵌套的UL导航列表，其中包含一些其他li元素。这是标记：

<ul class="navigation">
  <li><a href="#">No Chidren</a></li>
  <li><a href="#">With Chilren</a>
      <ul>
        <li><a href="#">Child 1</a></li>
        <li><a href="#">Child 2</a></li>
      </ul>
  </li>
</ul>

我尝试使用以下一些CSS声明来设置样式：

.navigation { 
 //stylings
}

.navigation li{ 
 //stylings
}

.navigation li a{ 
 //stylings
}

.navigation li a:hover{ 
 //stylings
}

但.navigation li会影响所有列表元素，包括子元素。有没有办法定位lis，以便样式只适用于顶级的，而不是孩子？

Answer 1

正如其他人所提到的，>选择器只会选择直接子项。但是，这是doesn't work in IE 6。

如果您需要支持IE 6，可以向子ul或li添加一个类，并使用该类从顶部li中删除样式级联：< / p>

<ul class="navigation">
  <li><a href="#">No Chidren</a></li>
  <li><a href="#">With Chilren</a>
      <ul class="level1">
        <li><a href="#">Child 1</a></li>
        <li><a href="#">Child 2</a></li>
      </ul>
  </li>
</ul>

-

.navigation li{ 
    background: url(bg.png);
}

.navigation .level1 li{ 
    background: none;
}

Answer 2

像这样，“＆gt;”说明李必须是.navigation的直接孩子

.navigation { 
 //stylings
}

.navigation > li{ 
 //stylings
}

.navigation > li a{ 
 //stylings
}

.navigation > li a:hover{ 
 //stylings
}

Answer 3

是的，可以使用子选择器。

.navigation>li>a{ 
 //stylings
}

上面的代码会影响“No Chidren”和“With Chilren”链接，但不会影响“child 1”元素。

以下是工作示例：http://jsfiddle.net/VuNwX/

在这里，您可以阅读有关选择器的更多信息：http://css.maxdesign.com.au/selectutorial/index.htm

CSS，只影响ul的顶级lis？

3 个答案: