選擇CSS導航菜單中的最後一個活動li類

我只需要僅使用CSS僅使用默認類的最後一個顏色。編輯HTML不是一種選擇。 IE9 +很好。我如何只着色最後一個鏈接？這只是一個例子，菜單是動態的，所以使用最後一個孩子或指定確切的最後一個鏈接不是一個選項。我有一個像這樣的導航菜單：選擇CSS導航菜單中的最後一個活動li類

<ul> 
    <li class="default"> 
     <a href="#">About Us</a> 
     <ul> 
      <li class="default"> 
       <a href="#">Where we live</a> 
       <ul> 
        <li class="default"> 
         <a href="#">Make this link red only</a> 
        </li> 
        <li> 
         <a href="#">Directions</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

來源

2012-11-27 faithfulprogrammer

你可以使用jQuery嗎？ –

我不喜歡，但我覺得我可能必須:(對於我來說，添加jquery比改變html更加容易。 – faithfulprogrammer

jquery解決方案是：$（「li.default：最後一個「）.css（」color「，」red「）; –

至於純粹的CSS方法，IE9支持這些僞選擇器。這也可以在jQuery中工作。但是，這個代碼的問題是如果你有多個默認值，那麼它會着色這些。

li.default > a:only-child { 
    color:red;    
}

來源

2012-11-27 23:21:37

我一直在用這個並得到了'li.default> a：only-child {color：red;}'，當active元素處於最後一級時工作，但在第二級和第一級這不起作用 – faithfulprogrammer

Yup this works（[Fiddle]（ http://jsfiddle.net/5PLVL/））太棒了！ –

@faithfulprogrammer然後也許'li.default> {顏色：紅色; }除了上面的選擇器？ –

-1

我認爲this PHP solution將是最好的，你的情況（here's a PHPfiddle demo我做：點擊「運行」，然後等待幾秒鐘）。

要實現這一點，將它添加到您的HTML文件的頂部：

<?php $thisPage='Make this link red only'; ?> 
<html><head>

然後在此PHP（的<?php和?>標籤內）添加到您的所有導航項目：

 <ul> 
     <li <?php if ($thisPage=='About Us') echo ' id="currentpage"'; ?>> 
      <a href="#">About Us</a> 
      <ul> 
       <li<?php if ($thisPage=='Where we live') 
      echo ' id="currentpage"'; ?>> 
        <a href="#">Where we live</a> 
        <ul> 
         <li<?php if ($thisPage=='Make this link red only') 
      echo ' id="currentpage"'; ?>> 
          <a href="#">Make this link red only</a> 
         </li> 
         <li <?php if ($thisPage=='Directions') 
      echo ' id="currentpage"'; ?>> 
          <a href="#">Directions</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul>

然後設置你的CSS來：

#currentpage a { color: red; }

您還可以有將index.html重命名爲index.php，或者更好的解決方案是使用.htaccess（假設您運行的是Apache服務器）至parse PHP inside HTML文件。

來源

2012-11-27 23:31:47 Baumr

目前我的安裝程序根本不使用PHP，所以我不能使用這個解決方案 – faithfulprogrammer

啊，很抱歉聽到 - 但希望其他人可以:) – Baumr

選擇CSS導航菜單中的最後一個活動li類

回答

相關問題