0

私はネストされたliを持っており、それらには特定のクラスがあります。ネストされたクラスに問題があります。特定のクラスにもかかわらず、スタイリングは親のクラスのものです。

<ul>    
<li class="navtitle-current"><a href="1.html">ONE</a>
    <ul>
    <li class="navtitle-current"><a href="2.html">TWO</a></li>
    <li class="navtitle"><a href="3.html">THREE</a></li>
    </ul>
    </li>
</ul>

.navtitle {
    font-weight: none;
}

.navtitle a{
    background-color:white;
    color: gray;
}

.navtitle a:hover,
.navtitle:hover{
    background-color:white;
    color: black;
}

.navtitle-current {
    font-weight: none;
}

.navtitle-current a{
    background-color:white;
    color: black;
}

.navtitle-current a:hover,
.navtitle-current:hover{
    background-color:white;
    color: black;
}

私が実現したいのは、ONE を黒、TWO を黒、THREE を灰色にする必要があるということです。ただし、すべてのリンクは黒です。

明示的にクラスがあれば、そのような問題は発生しないはずだという印象を受けました。誰か考えがありますか？

すべての助けに感謝します。

注: CSS ブロックが にないことに気付きました。私が持っているものを示すために、ここにコードを置いただけです。

4

4 に答える 4

2

.navtitle-currentは より上位レベルであるため、リンクはスタイル.navtitleを継承しています。.navtitle-current aその中でリンクのスタイルを設定したい場合は、タグをより具体的にする必要があります。に変更.navtitle aする.navtitle-current .navtitle aと、動作するはずです。

于 2013-05-21T19:45:00.623 に答える
1

あなたはそれをもっと賢くすることができます：

<div class="titles">
  <ul>  
    <li class="current"><a href="1.html">ONE</a>
      <ul>
        <li class="current"><a href="2.html">TWO</a></li>
        <li><a href="3.html">THREE</a></li>
      </ul>
    </li>
  </ul>
</div>

.titles ul li {...}
.titles ul li.current {...}
.titles ul li.current ul li {...}
.titles ul li.current ul li.current {...}

よろしく、

于 2013-05-21T19:48:33.063 に答える