为何无法在HTML中调用CSS超链接样式类menu-items？

DevOps 小满

2026-8-7

问题原因及解决方案

你的问题出在CSS选择器与HTML结构不匹配，导致菜单专用样式根本没选中目标元素，自然只会生效全局的a标签样式。

核心问题解释

你写的CSS选择器.menu-items a，含义是「匹配所有带有menu-items类的元素内部的<a>标签」，但你的HTML是把menu-items类直接加在了<a>标签本身上，这个选择器根本找不到对应的元素。

两种解决办法

办法1：修正CSS选择器（推荐）

直接把菜单专用的选择器改成匹配带menu-items类的<a>标签，利用类选择器更高的优先级覆盖全局样式：

a {
    color: white;
    text-decoration: none;
}

/* 直接匹配带menu-items类的a标签 */
.menu-items {
    color: black;
    text-decoration: none;
}

HTML保持你原来的写法即可，因为类选择器优先级（10）高于元素选择器（1），所以菜单样式会覆盖全局a的样式。

办法2：调整HTML结构（适配原CSS）

如果想保留原有的.menu-items a选择器，需要把menu-items类加到<a>的父元素上（比如<ul>或<li>），让选择器能匹配到目标：

<div class="container-outside">
    <div class="container-inside">
        <!-- 把menu-items类加到ul上 -->
        <ul class="ul-list menu-items">
            <li>
                <a href="temperature.html">Temperature</a>
            </li>
            <li>|</li>
            <li>Weight</li>
            <li>|</li>
            <li>Currency</li>
        </ul>
    </div>
</div>

这样.menu-items a就能选中<ul>内部的所有<a>标签，样式会正常生效。