Bootstrap 5导航栏logo字体大小CSS属性不生效求助

问题根源 #

1. CSS加载顺序错误：你把自定义样式表styling.css放在了Bootstrap CSS之前，浏览器会优先应用后加载的样式，导致Bootstrap的默认字体大小覆盖了你自定义的font-size。
2. 选择器优先级冲突：你给<h1>标签添加了navbar-brand类，Bootstrap对<h1>和.navbar-brand都有内置字体样式，优先级高于你的自定义规则。

修复步骤 #

1. 调整CSS引入顺序 #

把Bootstrap CSS放在自定义样式表之前，让自定义样式能够覆盖框架默认样式：

<!-- 先引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- 再引入自定义样式表 -->
<link rel="stylesheet" href="styling.css">

2. 提升自定义样式优先级 #

为了彻底避免被框架样式覆盖，可以给选择器增加权重，比如加上父级类：

.navbar .navbar-brand{
    font-size: 2.5rem;
    padding: 5px;
    border-bottom: 4px solid black;
    border-left: 4px solid black;
    user-select: none;
}

如果你想快速解决，也可以临时用!important（不推荐大规模使用）：

.navbar-brand{
    font-size: 2.5rem !important;
    /* 其他样式保持不变 */
}

3. 修正HTML标签语义（可选） #

Bootstrap的navbar-brand通常推荐用<a>标签，更符合导航栏的语义规范，也能避免<h1>的默认样式干扰：

<a class="navbar-brand" href="#">HELP ME OUT</a>

完整修正代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="styling.css">
</head>
<body>
    
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">HELP ME OUT</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav m-auto">
                    <li class="nav-item">
                        <a class="nav-link active navtag" aria-current="page" href="dashmain.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Guide</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#">Dropdown</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>
</html>

CSS代码 #

* {
    margin: 0;
    padding: 0;
    background-color: #408EC6;
}

.navbar .navbar-brand{
    font-size: 2.5rem;
    padding: 5px;
    border-bottom: 4px solid black;
    border-left: 4px solid black;
    user-select: none;
}

.navbar-brand:hover {
    animation: color-change 3s infinite;
}

@keyframes color-change {
    0% {
        color: #1E2761;
    }

    15% {
        color: #7A2048;
    }

    25% {
        color: wheat;
    }

    50% {
        color: #1E2761;
    }

    75% {
        color: #7A2048;
    }

    80% {
        color: wheat;
    }

    100% {
        color: #1E2761;
    }
}

内容的提问来源于stack exchange，提问作者Depleted Money