选择不包括CSS

Question

我有以下的HTML中的嵌套链接的第一个链接：

<ul> 
    <li> 
    <a href="#">test</a> 
    <ul class="sub"> 
     <li><a href="#">test 2</a></li> 
    </ul> 
    </li> 
</ul> 

我想影响的第一个环节，但不是第二个，我该怎么办这个只用CSS？

Answer 1

可以使用:not()伪类排除ul.sub元素，然后选择直接<li>和<a>孩子如下：

在这里你去：

ul:not(.sub) > li > a { 
    background-color: gold; 
} 

WORKING DEMO。

或组合属性选择，如果第一个<ul>没有class属性：

ul:not([class]) > li > a { 
    background-color: gold; 
} 

如果有多个<li>元素在主<ul>，您可以使用:first-child伪类，只选择的第一列表项：

ul:not(.sub) > li:first-child > a { 
    background-color: gold; 
} 

UPDATED DEMO。

Answer 2

你可以简单地做

ul:not(.sub)>li:first-child>a{ 
    background:red; 
} 

Answer 3

甲纯CSS解决方案将是如下

ul:not(.sub) > li:first-child > a 

但:not伪选择仅在IE9和较新的支持。

Answer 4

http://jsfiddle.net/4aA7c/

CSS：

ul:not(.sub) > li:first-child > a { 
    background-color: gold; 
}