在CSS中，如何根据<ul>列表中的级别为同一div提供两种样式？</ul>

Question

我正在使用嵌套菜单，并且在树的两个级别上显示相同的类，但我需要在较低级别中以不同方式格式化。我有什么想法可以做到这一点？我搜索了一段时间，并尝试了许多不同的解决方案无济于事。这是我的HTML和最近的尝试：

<ul class="topnav">
  <li><h3 class="toggle_action"> Meetings</h3>
    <ul class="div_toggle">
      <li><h3><a href="/index">Home</a></h3></li>
      <li><h3 class="toggle_action"> Attend</h3> // <-- same div as line 2 but needs different formatting
        <ul class="div_toggle"> etc...

并尝试了CSS修复：

.toggle_action {               /// the top-level format for the div with blue text
color:#5376c5;
}
ul.topnav ul li {             /// the general <ul> formatting for the secondary level
color: #999;
}
.toggle_action ul ul li {     /// my attempt to make the div appear in gray on second level
color:#999; 
}

任何提示都将不胜感激！

Answer 1

您的上一个CSS样式从未存在于HTML中; <h3 class="toggle_action">没有孩子。

我认为你的意思是：

.toggle_action {             
   color:#5376c5;
}
ul.topnav ul li {            
   color: #999;
}
ul ul li .toggle_action {   
   color: #999; 
}