Question

我似乎无法获得CSS：主动选择器工作。下面是我的代码，这是我尝试过的。我在链接中添加了一个“活动”类，为ul组使用了相同的类名，并添加了：在最后激活等等。有人可以告诉我我做错了吗？

<body>
    <!-- NAVIGATION -->
    <header role="navigation">
        <nav class="navbar navbar-fixed-top navbar-inverse">
            <div class="navbar-top">
                <div class="container">
                    <div class="row">
                        <ul>
                            <li>Isaac Luna</li>
                            <li class="nav-item">
                                <a href="index.html">Home</a>
                            </li>
                            <li class="nav-item">
                                <a href="#about">About</a>
                            </li>
                            <li class="nav-item">
                                <a href="#portfolio">Portfolio</a>
                            </li>
                            <li class="nav-item">
                                <a href="#contact">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </header>
</body>



    html {
        color: #ffffff;
        font-family: 'Roboto', sans-serif;
    }

    body {
        margin: 0;
        padding: 0;
        background-color: #264c95;
        background-size: 15px 15px;
        background-image: 
            linear-gradient(to right, rgba(255, 255, 255, 0.22) 1px, transparent 1px), 
            linear-gradient(to bottom, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    }

nav {
    font-weight: bold;
    font-size: 12pt;
    margin: 0;
    padding: 0;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0);
        background-image: url(texture.png);
        position: fixed;
        top: 0;
        width: 100%;
        height: 46px;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
        height: 46px;
    }

    li {
        height: 46px;
        float: left;
    }

    li:first-child {
        height: 18px;
        display: block;
        text-align: center;
        padding: 14px 14px;
        text-decoration: none;
    }

    a {
        height: 18px;
        display: block;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        color: white;
    }

    .nav-item:hover {
        display: block;
        background-color: #264c95;
    }

    .nav-item:active {
        display: block;
        background-color: #264c95;
    }

    .nav-item .active:active {
        display: block;
        background-color: #264c95;
    }

    .nav-item #PageActive:active {
        display: block;
        background-color: #264c95;
    }

Answer 1

如果要将活动类添加到

    .nav-item a:active {
        background-color: red;
    }

表示.nav-item

.nav-item:active {
            background-color: brown;
        }

<强>更新

我认为你正在寻找悬停效果尝试下面的代码

.nav-item:hover, .nav-item:active {
    background-color: brown;
}

您可以通过该特定元素中的inspect元素和进入活动状态

来检查

希望有所帮助

CSS：主动选择器

1 个答案: