Question

您好我已经查看了各种资源，包括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"; 
    } 
?>

非常感谢您的帮助！

Answer 1

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

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

演示：jsfiddle.net/kjxtg

Answer 2

如果您的目标只是让每个类别的孩子都有不同的颜色，请尝试这个小提琴：http://jsfiddle.net/2yqaz/。如果您查看HTML标记，您将会看到＆＃34; common＆＃34;标记这一点的方式：

<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。

Answer 3

因此，根据我自己的观察，如果元素是直接的孩子，“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”。其余的不是直接的孩子，这就是为什么它不起作用。

希望有所帮助。

最佳，

尝试使用CSS类与Nth-子选择器一起使用

3 个答案: