尝试使用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选择器一起使用

回答

相关问题