嘗試使用CSS類與Nth-child選擇器一起使用

嗨我已經查看了各種資源，包括Stackoverflow關於如何使用第N個子選擇器和Class在一起，到目前爲止我仍然失敗。嘗試使用CSS類與Nth-child選擇器一起使用

本質上我的菜單中有主要類別（CLASS =貓）和亞類（CLASS = SUBCAT）

我想每個主類別進行不同的着色。子類別都保持不變。每隻主貓之間可能會有多個子貓。因此，例如：

牛肉
牛排
烤
雞
乳房
鼓槌
翅膀
魚
三文魚

只要我不把課程放入課堂，我就可以讓它工作 - 課堂上第n個孩子選擇器即刻失敗。

CSS：

#nav ul li.cat a { 
display:block; 
background-color: #265054; 
font-size: 1em; 
padding-left: 25px; 
height: 18px; 
padding-top: 2px; 
margin: 1px 0px; 
color: #FFFF00; 

} 

#nav ul li.cat a:nth-child(2) { 
background-color: #728c8c; 
}

代碼：

<?php 
    if (count($navlist)){ 
     echo "<ul>"; 
     foreach ($navlist as $key => $list){ 
      foreach ($list as $topkey => $toplist){ 
       echo "<li class='cat'>"; 
       echo anchor("welcome/cat/$topkey",$toplist['name']); 
       echo "</li>\n"; 

       if (count($toplist['children'])){ 
        foreach ($toplist['children'] as $subkey => $subname){ 
         echo "\n<li id='subcat'>"; 
         echo anchor("welcome/cat/$subkey",$subname); 
         echo "</li>"; 
        } 
       } 
      } 
     } 

     echo "</ul>\n"; 
    } 
?>

非常感謝您的幫助！

來源

2012-04-05 Vince

您使用的瀏覽器是？ nth-child僅支持IE版本9以上版本。 – 2012-04-05 22:46:04

我正在開發Dreamweaver並在FF 11中進行測試。0 – Vince 2012-04-05 22:48:41

關注提供一個如何構建HTML的例子？我懷疑這是真正的麻煩。 – 2012-04-05 22:53:39

您的選擇器是錯誤的，在這裏它已被糾正，並且由於您只想對主要類別樣式進行樣式設置，所以我添加了>子選擇器。

#nav ul li.cat:nth-child(2) > a { 
    background-color: #728c8c; 
}

演示：jsfiddle.net/kjxtg

來源

2012-04-05 23:11:50 Marcel

，但不幸的是沒有工作。我只是忽略了第n個子選擇器 – Vince 2012-04-05 23:30:29

@VinceJacobs：似乎在[此演示]中工作正常（http://jsfiddle.net/Marcel/kjxtg/）。 – Marcel 2012-04-05 23:46:21

是的，我認爲這個答案很好。 – mddw 2012-04-05 23:53:27

如果您的目標只是爲了讓每個類別的孩子有不同的顏色，請嘗試下面這個小提琴：http://jsfiddle.net/2yqaz/。如果你看一下HTML標記，你會看到這個標記了的「共同」的方式：

<nav> 
    <ul> 
     <li class="cat"> 
      <a href="">Beef</a> 
      <ul> 
       <li><a href="">Steak</a></li> 
       <li><a href="">Raost</a></li> 
      </ul> 
     </li> 
     <li class="cat"> 
      <a href="">Chicken</a> 
      <ul> 
       <li><a href="">Breast</a></li> 
       <li><a href="">Drumstick</a></li> 
       <li><a href="">Wing</a></li> 
      </ul> 
     </li> 
     <li class="cat"> 
      <a href="">Fish</a> 
      <ul> 
       <li><a href="">Salmon</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav>

HTH。

來源

2012-04-05 23:03:58

謝謝Tiesen，我真正需要的是給每個Main類別一個不同的顏色，因此需要選擇第n個孩子。你給我的是一個解決方案，讓所有的主要貓都得到相同的顏色。感謝馬塞爾 – Vince 2012-04-05 23:21:07

所以對我自己的觀察「第n個孩子」會如果元素是直接的孩子一起。請參考這裏 http://jsfiddle.net/fuPJs/

如果您在代碼中發現，這些行：

<li class="cat"> 
     <a href="">Beef</a> 
     <a href="">Steak</a> 
     <a href="">Raost</a></li> 
    </li>

他們是類=「貓」的直接子讓你的CSS選擇器適用於「第n個孩子」。其餘的人不是直接的孩子，這就是爲什麼它沒有工作。

希望有所幫助。

最好，

來源

2012-04-05 23:28:21

非常感謝，但可悲的是你的努力沒有奏效。你的CSS不會將類別與主要類別分開。您的N-child選擇器確實會給出不同的顏色，但只是對下一個可能是子類別的li。 – Vince 2012-04-05 23:38:02

嘗試使用CSS類與Nth-child選擇器一起使用

回答

相關問題