CSS3获取最后一个<；李>；从嵌套列表中的顶级列表中<；ul>；

我有一个嵌套列表：

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>
     <ul>
       <li>Nested Item</li>
       <li>Nested Item</li>
       <li>Last Nested Item</li>
     </ul>
  </li>
  <li>Item</li>
  <li>Item</li>
  <li>Last Item</li>
</ul>

对我来说，上面这句话绝对是在说“在第一个UL中的最后一个LI中获取链接”，但显然，Firefox的想法不同。。。。（IE和Chrome也是如此，所以一定是我……）

---

有人知道我哪里出错了吗？

它说在任何嵌套级别中，在第一个

ul

中的最后一个

li

中获取链接，这就是为什么您也在嵌套列表中获取项目的原因

要防止出现这种情况，请使用子选择器仅限于直接嵌套的列表项，而不是忽略嵌套级别的后代选择器：

.container > ul:first-of-type > li:last-child > a

这意味着选择第一级li并获取最后一个li元素中的第一级链接。 您不需要最后一个>a，除非您也有嵌套链接

这对我很有用：

<style>
    .container > ul:first-of-type > li:last-child a {
        background:red;
    }
</style>
<div class="container">
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>
     <ul>
       <li>Nested Item</li>
       <li>Nested Item</li>
      <li><a href="">Last Nested Item</a></li>
     </ul>
  </li>
  <li>Item</li>
  <li>Item</li>
  <li><a href="blah">Last Item</a></li>
</ul>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>
     <ul>
       <li>Nested Item</li>
       <li>Nested Item</li>
       <li>Last Nested Item</li>
     </ul>
  </li>
  <li>Item</li>
  <li>Item</li>
  <li><a href="blah">Last Item</a></li>
</ul>
</div>

.container>ul:类型的第一个>li:最后一个子a{
背景：红色；
}

项目
项目
项目


嵌套项
嵌套项



项目
项目



项目
项目
项目


嵌套项
嵌套项
最后一个嵌套项


项目
项目

这对我不起作用，它没有选择任何内容。如果我取出容器和UL之间的>，它会选择，但仍然会给出两个嵌套级别中的最后一个LI。@Codecraft：首先，我在给定代码中没有看到任何

.container

元素，因此我假设您的

UL

直接包含在其中，因为它在任何地方都没有被提及。您很聪明，我很笨！它在一个容器里，但不是直接在里面。如果我引用的包含元素是它的直接父元素，它就会工作。很抱歉有代表性！值得注意的是，

子选择器在IE7中有缺陷，而

最后一个子选择器在IE中根本不起作用。但这并不奇怪=p选择器在IE9中工作得很好。我不认为任何早期版本在这一点上是相关的。
.container > ul:first-of-type > li:last-child a

<style>
    .container > ul:first-of-type > li:last-child a {
        background:red;
    }
</style>
<div class="container">
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>
     <ul>
       <li>Nested Item</li>
       <li>Nested Item</li>
      <li><a href="">Last Nested Item</a></li>
     </ul>
  </li>
  <li>Item</li>
  <li>Item</li>
  <li><a href="blah">Last Item</a></li>
</ul>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>
     <ul>
       <li>Nested Item</li>
       <li>Nested Item</li>
       <li>Last Nested Item</li>
     </ul>
  </li>
  <li>Item</li>
  <li>Item</li>
  <li><a href="blah">Last Item</a></li>
</ul>
</div>