Question

我有一个嵌套列表：

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

我只想使用CSS3选择器获取最后一个LI'最后一项'，它没什么大不了的，只是为了在悬停上放置一些圆形边框以阻止它从容器中溢出，所以没有后向兼容性是需要（因为无论如何，容器上的边框都不会在非CSS3浏览器上舍入）。

如果没有选择嵌套列表中的最后一个<li>，我似乎无法实现它。我正在尝试（除其他外）

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

对我来说，上面肯定是说“在第一个UL中获得最后一个LI的链接”，但显然，Firefox认为不同......（IE和Chrome也一样，所以一定是我... 。）

谁能看到我出错的地方？

Answer 1

它表示要在任何嵌套级别的第一个li 中的最后ul获取链接，这就是您在嵌套列表中获取该项目的原因同样。

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

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

Answer 2

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

这意味着选择第一级li并获取最后一个li元素中的第一级链接。你不需要最后一个＆gt; 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>

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

2 个答案: