我该怎么做才能让我的网页继承我的 CSS [重复]答案

【问题标题】：what can i do to make my webpage inherity my css [duplicate]我该怎么做才能让我的网页继承我的 CSS [重复]
【发布时间】：2025-11-23 01:15:02
【问题描述】：

所以当我的导航项目的默认颜色是黑色时。现在我正在尝试使用我的 css 将颜色更改为白色，但它不起作用。导航品牌和导航链接可能是页面上的脚本影响它吗？如果不是我如何更改默认引导 css 设置

.navbar{
    padding: 20px 0px;
    box-shadow: none;
    background-color: transparent;
}
.navbar-brand{
    font-size: 28px;
    font-weight: 700;
    color:  #3a3a3a;
}
.navbar .navbar-expand-md .navbar-nav .nav-link{
    position: relative;
    font-size: 16px;
    font-weight: 300;
    color:  #ffffff;
    padding: 0px 30px 0px;
    transition: all .5s ease-in-out;
}

.navbar-nav .nav-item .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0px;
    height: 2px;
    background:  #ffffff;
    transition: all .5s ease-in-out;
}

.navbar-nav .nav-item .nav-link:hover::before,
.navbar-nav .nav-item .nav-link.active::before {
    width: 40px;
}

<nav class="navbar navbar-expand-md navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#page-top">Otikes Fitness</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#page-top">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#About">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Features">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Contact">Contact</a>
                    </li>
                </ul>

            </div>

        </div>
    </nav>

【问题讨论】：

标签： javascript html jquery css bootstrap-5

【解决方案1】：

问题在于 CSS 选择器。而不是.navbar .navbar-expand-md .navbar-nav .nav-link，它应该是.navbar.navbar-expand-md .navbar-nav .nav-link，因为.navbar-expand-md不是.navbar的子元素，它是同一个元素。

.navbar.navbar-expand-md .navbar-nav .nav-link {
    position: relative;
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    padding: 0px 30px 0px;
    transition: all .5s ease-in-out;
}

【讨论】：