CSS a.active不工作

我的页面顶部有一个导航栏，活动页面应该有另一个背景颜色。我现在有颜色和红色，所以很明显看到。但在页面上没有红色。CSS a.active不工作

我的HTML：

<body> 

<ul> 
    <li class="<?= ($activePage == 'index') ? 'active':''; ?>"><a href="index.php">Login</a></li> 
    <li class="<?= ($activePage == 'Login') ? 'active':''; ?>"><a href="Login.php">Profil</a></li> 
    <li class="<?= ($activePage == 'Profilchange') ? 'active':''; ?>"><a href="Profilchange.php">Profil bearbeiten</a></li> 
    <li class="<?= ($activePage == $Profilkennungbasename) ? 'active':''; ?>"><a href='http://localhost/PHPOrdner/Login/<?php echo $Profilerow; ?>'>öffentliches Profil</a></li> 
    <li style="float:right;" class="<?= ($activePage == 'Logout') ? 'active':''; ?>"><a style="background-color:#002b80" href="Logout.php">Ausloggen</a></li> 
</ul> 
<br>

我的CSS：

<style> 

    body { 
    font-family: "Arial", Sans-serif; 
    } 

    input[type=submit] { 
    background-color: #000099; 
    border: none; 
    color: white; 
    padding: 16px 32px; 
    text-decoration: none; 
    margin: 4px 2px; 
    width: 13.5%; 
    cursor: pointer; 
    } 

    input[type=submit]:hover { 
    background-color: #000066; 
    } 

    ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #000099; 
    } 

    li { 
    float: left; 
    } 

    li:last-child { 
    border-left: 1px solid #bbbbbb; 
    } 

    li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    border-right: 1px solid #bbbbbb; 
    } 

    li a:hover { 
    background-color: #000066; 
    } 

    li a.active { 
    background-color: #FF0000; 
    } 

    a:link, a:visited { 
    background-color: #000099; 
    color: white; 
    padding: 14px 25px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    cursor: pointer; 
    width:200px; 
    } 

    a:hover { 
    background-color: #000066; 
    cursor: pointer; 
    } 

</style>

我仍然很新的HTML，CSS和PHP的，所以我想这是显而易见的。：d

来源

2017-05-08 Piratenlulatsch

您的li元件上添加active类，而不是对a所以选择器应该是

li.active a { 
    /* styles goes here */ 
}

在上述选择器中，我选择具有active的class然后li元件我们选择嵌套在这个li

一件事我在你的代码中看到里面的a为t你正在使用内联样式，比如style="background-color:#002b80"，所以如果你打算使用内联样式，他们会覆盖你的CSS规则声明，因为内联样式是最具体的。

您或者需要使用!important覆盖它们，或者您需要将它们移动到class并将class附加到相应的元素。

因此，请避免使用内联样式。

CSS a.active不工作

回答

相关问题