选择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伪类来选择 first < / strong>列表项目：

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