css - 在 CSS 中，如何根据同一 div 的级别为同一 div 赋予两种样式列表？

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; 
}