3

我有一个嵌套列表：

<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 'last item'，这没什么大不了的，只是为了在悬停上放置一些圆形边框以防止它溢出容器，因此不需要向后兼容（因为无论如何，容器上的边框在非 CSS3 浏览器上都不会四舍五入）。

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

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

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

谁能看到我哪里出错了？

4

2 回答 2

9

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

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

.container > ul:first-of-type > li:last-child > a
于 2012-07-02T17:58:27.080 回答
0 
.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>
于 2012-07-02T18:04:28.317 回答