如何修改导航栏(navbar)项目字体大小？设置17px无效问题求助

问题出在你给.nav容器设置的font-size被内部的<h1>标签默认样式覆盖了——浏览器对<h1>这类标题标签有预设的字体大小，优先级高于继承自父容器的样式。

下面是几种可行的解决方法：

方法1：精准选中导航内的h1标签 #

直接给.nav下的所有<h1>设置样式，这样不会影响页面其他地方的<h1>：

/* 保留.nav的布局样式 */
.nav {
    display: flex;
    gap: 25px;
}

/* 单独设置导航内h1的字体样式 */
.nav h1 {
    font-size: 17px;
    color: var(--text-color);
    font-family: 'Manrope';
    font-style: normal;
    /* 可选：去掉h1默认的加粗效果 */
    font-weight: normal;
}

方法2：替换语义不合适的h1标签 #

导航链接用<h1>语义上不合理（页面主标题应该只有一个<h1>），换成<a>标签更合适，同时避免默认样式干扰：
修改后的HTML：

<div class="navbar">
    <div class="nav-bg">
        <!-- nav background container -->
    </div>
    <h1 class="title-text"><span class="text-gradient" >Cosmic</span> Studios</h1>
    <div class="nav">
        <a href="#" class="nav-link">Home</a>
        <a href="#" class="nav-link">Proxies</a>
        <a href="#" class="nav-link">Courses</a>
    </div>
</div>

对应的CSS：

.nav {
    display: flex;
    gap: 25px;
}

.nav-link {
    font-size: 17px;
    color: var(--text-color);
    font-family: 'Manrope';
    font-style: normal;
    text-decoration: none; /* 移除链接默认下划线 */
}

方法3：给导航内h1统一加类 #

如果一定要保留<h1>标签，给它们加一个通用类，避免影响其他元素：
修改后的HTML：

<div class="navbar">
    <div class="nav-bg">
        <!-- nav background container -->
    </div>
    <h1 class="title-text"><span class="text-gradient" >Cosmic</span> Studios</h1>
    <div class="nav">
        <h1 class="nav-item home">Home</h1>
        <h1 class="nav-item proxies">Proxies</h1>
        <h1 class="nav-item courses">Courses</h1>
    </div>
</div>

对应的CSS：

.nav {
    display: flex;
    gap: 25px;
}

.nav-item {
    font-size: 17px;
    color: var(--text-color);
    font-family: 'Manrope';
    font-style: normal;
}

内容的提问来源于stack exchange，提问作者bradys dev