CSS,只影响ul的顶部lis?

正如其他人所说 > 选择器将只选择直接子级。然而,这 doesn't work in IE 6 .

如果你需要支持IE6,你可以给孩子添加一个类 ul s或 li s、 并使用它从顶部移除样式层叠 锂 :

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

像这样,“>”表示li必须是.navigation的直接子级

.navigation { 
 //stylings
}

.navigation > li{ 
 //stylings
}

.navigation > li a{ 
 //stylings
}

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

是的,有可能 子选择器 .

.navigation>li>a{ 
 //stylings
}

上面的代码将影响“No children”和“With children”链接,但不影响“child 1”元素。

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

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