css - 如何对不同菜单中的 和 标签应用不同的样式

Question

我想将样式应用于顶部菜单 <ul> , <li>和 <a> body 菜单的标签和不同风格<ul> , <li>和 <a>标签。

这怎么可能。

简而言之，我想要 ul li 的不同样式和顶部菜单的标签以及 ui li 的不同样式和正文菜单的标签顶部菜单代码

Answer 1

您需要为菜单/元素分配类或 ID 以将它们彼此区分开来，然后在 CSS 中设置类/ID 的样式。示例 HTML:

<ul id="top-menu">
    <li>
        <a>Item 1</a>
    </li>
    <li>
        <a>Item 2</a>
    </li>
</ul>
<ul class="body-menu">
    <li>
        <a>Item 1</a>
    </li>
    <li>
        <a>Item 2</a>
    </li>
</ul>

还有 CSS:

ul#top-menu {
    STYLES
}
#top-menu > li {
    STYLES
}
#top-menu > li > a {
    STYLES
}
ul.body-menu {
    STYLES
}
ul.body-menu > li {
    STYLES
}
ul.body-menu > li > a {
    STYLES
}