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 の「最後の項目」を取得したかっただけで、大したことではありません。ホバーに丸い境界線を配置して、コンテナーからこぼれ落ちるのを防ぐだけなので、後方互換性は必要ありません (いずれにせよ、非 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 に答える