2

我有以下标记，用于生成弹出式超级菜单（.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 定位吗？

4

5 回答 5

2

如果是我，我会在有问题的最终实体上放置很好的目标类，然后改变

#mainmenu li h2 a {}

到

#mainmenu .section {}

和

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

到

#mainmenu .subsection {}

等等。

于 2009-05-29T15:44:27.783 回答
2

就我个人而言，我认为您的 html 看起来不错，它没有被无尽的 id 所困扰，并且没有一个类看起来是多余的或无用的。

如果您在除 li 内部、列内部、父 li 内部之外的任何地方都没有使用 h3，那么您可以这样做#mainmenu h3 a：我真的认为你可以在你的选择器中不那么明确。

我尝试真正利用独特的 html 标签，这样我只需要最顶层元素上的 id 和下面的几个类（如果需要）。

于 2009-05-29T15:51:08.740 回答
2

您总是可以使用更具体的选择器名称。代替：

#mainmenu li.mega .column li h3 a {}
and
<ul id="mainmenu"><li class="mega"><div class="column"><li><h3><a>

采用

h3.mega_column a {}
and
<ul id="mainmenu"><li class="mega"><div class="column"><li><h3 class="mega_column"><a>
于 2009-05-29T15:51:21.093 回答
1

并非没有真正看到你的 CSS 的其余部分，但我认为你的动机是错误的。您的目标应该是让您的标记准确反映所需的内容。如果需要将此事物定义为与该事物分开，则它们需要作为不同的元素存在，如果不是，则不是。分离关注点，甚至在您的标记符合需要之前不要考虑 CSS 。

我会说，看起来你可以将 div.column 和 ul 子级折叠成 ul.column，并且 h2 中的锚点可能会移动到 div.submenu 内部并给出一个“标题”类。

于 2009-05-29T15:45:27.193 回答
1

除了确保您的结构真正适合您的内容的语义，而不仅仅是出于设计原因之外，我还可以建议以下几点：

  1. 如果 div 中没有其他内容，则不需要将 <ul> 包装在 <div> 中。它们都是块级元素，您可以编写 <ul class="column"> 并为自己节省一些不必要的标记。它是多余的。

  2. 如果你不使用类名在不同的地方表示不同的东西，你可能会大大简化你的 CSS。例如，如果您只在#mainmenu .mega 下使用“column”类，那么实际上不需要每次都指定它。只是说.column h3 a会到达那里。

  3. 如果你想要 jquery 的简单性，你也可以利用 CSS3 选择器，比如 :not() 来为你整理东西。例如，$("#mainmenu li.mega .column li")您可以代替$("#mainmenu li:not(.mega)")

这些是我的想法。

于 2009-05-30T05:17:45.683 回答