0

こんにちは私はN番目の子セレクターとクラスを一緒に使用する方法についてStackoverflowを含むさまざまなリソースを見てきましたが、これまでのところまだ失敗しています。

基本的に私のメニューにはメインカテゴリ（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

Your selector is wrong, here it is corrected, and since you only want to style the main categories styled, I've added a > child selector.

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

Demo: jsfiddle.net/kjxtg

于 2012-04-05T23:11:50.420 に答える
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 に答える
0

So on my own observation "nth-child" will work if the element is direct child. Please refer to here http://jsfiddle.net/fuPJs/

If you notice in the code, these lines:

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

they are a direct child of class="cat" so your css selector works for "nth-child". The rest of them are not direct child that's why it did not work.

Hope that helps.

Best,

于 2012-04-05T23:28:21.097 に答える