0

嗨，我已经查看了各种资源，包括 Stackoverflow 关于如何一起使用第 N 个子选择器和 Class 的资源，但到目前为止我仍然失败。

基本上我的菜单有主要类别（class =cat）和子类别（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"; 
    } 
?>

非常感谢您的帮助！

4

3 回答 3

1

您的选择器是错误的，在这里已更正，并且由于您只想设置主要类别的样式，因此我添加了一个 >子选择器。

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

演示：jsfiddle.net/kjxtg

于 2012-04-05T23:11:50.420 回答
0

因此，根据我自己的观察，如果元素是直接子元素，“nth-child”将起作用。请参考这里 http://jsfiddle.net/fuPJs/

如果您在代码中注意到，这些行：

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

它们是 class="cat" 的直接子代，因此您的 css 选择器适用于“nth-child”。其余的不是直接孩子，这就是为什么它不起作用。

希望有帮助。

最好的，

于 2012-04-05T23:28:21.097 回答
0

如果你的目标只是让每个类别的孩子有不同的颜色，试试这个小提琴：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-05T23:03:58.740 回答