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

它说要在任何嵌套级别li的第一个ul 中获取链接,这就是为什么你也在嵌套列表中获取该项目.

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

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