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

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

它说在第一个 ul 中的最后一个 li 中获取链接 在任何嵌套级别，这就是为什么你得到嵌套列表中的元素。

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

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