css - 我如何管理这个嵌套标记和 CSS 以保持简单易用？

Question

我有以下标记用于生成弹出式巨型菜单(.column div 允许每个弹出窗口中有多个列，尽管下面的示例只有一个列)...

<ul id="mainmenu">
    <li class="mega">
        <h2><a href="/">Menu 1</a></h2>
        <div class="submenu col1 leftmenu">
            <div class="column">
                <ul>
                    <li><h3>Sub Menu Heading</h3></li>
                    <li><a class="hilight" href="#">Do Something</a></li>    
                    <li><a class="hilight" href="#">More great stuff</a></li>
                    <li><a href="#">Another Item</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li class="mega">
        <h2><a href="#">Second Menu</a></h2>
        <div class="submenu col3 leftmenu">
               blar blar blar
        </div>
    </li>
    // more menus here    
</ul>

因为它嵌套得很深，有很多类似的标签 ( <li> <a> ) 我最终需要一个相当糟糕的选择器列表来在 css 中设置它的样式，例如。

#mainmenu li h2 a {}
#mainmenu li.mega .column li h3 a {}

任何人都可以建议对标记进行任何改进，以便使用 CSS 和 jQuery 定位更简单吗？

Answer 1

如果是我，我会在有问题的最终实体上放置可很好定位的类，然后更改

#mainmenu li h2 a {}

到

#mainmenu .section {}

和

#mainmenu li.mega .column li h3 a {}

到

#mainmenu .subsection {}

等等。