如何更改活動導航鏈接的背景顏色？

Question

我的 asp.net 站點有一個暗模式版本，除了活動卡頭選項卡外，一切正常。 我嘗試了一堆不同的 CSS 來弄清楚，但我無法理解。

我認為這樣的事情會奏效

.nav-link > .active {
    background-color: var(--bg);
    color: var(--color-text);
}

但事實並非如此。 下面是代碼：

<div class="row">
    <div class="col-md-6 offset-md-3">
        <div class="card login-logout-tab">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link" href="/Identity/Account/Login">Sign In</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/Identity/Account/Register">Sign up</a>
                    </li>
                </ul>
            </div>
            <div class="card-content">
                <div class="row">
                    <div class="col-md-12">
                        @RenderBody()
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @RenderSection("Scripts", required: false)

<script>
    $(function () {
        var current = location.pathname;
        $('.nav-tabs li a').each(function () {
            var $this = $(this);
            if (current.indexOf($this.attr('href')) !== -1) {
                $this.addClass('active');
            }
        })
    })
</script>
}

這些是我要更改背景顏色的區域：

<li class="nav-item">
       <a class="nav-link active" href="/Identity/Account/Register">Sign up</a>
</li>

Answer 1

.nav-link >.active將 select 是具有.nav-link class 的元素的（直接）子元素。 但在您的情況下， .active class 應用於.nav-link元素本身（作為附加類） - 請參閱您的示例<a class="nav-link active" href="/Identity/Account/Register">Sign up</a>

所以它的選擇器必須是.nav-link.active {... } （中間沒有空格），它選擇具有這兩個類的任何元素。

Answer 2

根據您的 css .nav-link >.active nav-link 沒有直接子元素，因此它不起作用。

因此，第一個解決方案將 css.nav-link 中的 class 更改為.nav-item

.nav-item > .active {
    background-color: var(--bg);
    color: var(--color-text);
}

或者，您也可以這樣做。

.nav-link.active {
    background-color: var(--bg);
    color: var(--color-text);
}