html - 在非事件/悬停/事件状态下编辑特定元素

Question

我正在为我的网站使用 Foundation 框架，以下代码是我在 HTML 文件中关注的内容:

<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">jDispatch</a></h1>
        </li>
        <li class="toggle-topbar menu-icon">
            <a href="#"><span>Menu</span></a>
        </li>
    </ul>

    <section class="top-bar-section">
        <ul class="right">
            <li class="has-dropdown">
                <a href="#">Menu</a>
                <ul class="dropdown">
                    <li><a href="#">Link one</a></li>
                    <li><a href="#">Link two</a></li>
                </ul>
            </li>
        </ul>
    </section>
</nav>

我想知道如何编辑下拉按钮本身(其文本为“菜单”)并针对所有可能的状态(不活动、悬停和单击)对其进行编辑？

通过检查 Foundation 实际网站上的代码(当然使用他们自己的框架)，我已经能够分别使用以下 CSS 代码修改非事件状态和悬停状态:

/* inactive/not hovered or clicked */
.top-bar-section li:not(.has-form) a:not(.button) {
    background: yellow;
    color: blue;
}

/* hovered over */
.top-bar-section li:not(.has-form) a:not(.button):hover {
    background: green;
    color: yellow;
}

我认为 .top-bar-section li:not(.has-form) a:not(.button):active {...} 可以解决问题，但事实并非如此

编辑:另外，如何更改下拉项的font-family？使用 .top-bar-section ul li > a {...} 我可以使用 color 更改“菜单”按钮及其所有下拉项的文本颜色，但使用 font-family 只会更改“菜单”按钮的字体。

Answer 1

.top-bar-section li:not(.has-form) a:not(.button):active {...} 将在单击时更改“菜单”的样式.

但是如果“菜单”也链接到另一个页面，如果您在新页面加载之前看到它们，您只会看到这些样式处于事件状态一秒钟。

Check out the codepen demo here

.top-bar-section li:not(.has-form) a:not(.button):active {
   background-color: blue;
   color: white;
}