Css 活动/当前导航链接不工作_Css

Css 活动/当前导航链接不工作

css

Css 活动/当前导航链接不工作,css,Css,我正在尝试实现活动/当前导航链接，以便用户在某个导航链接上的活动内容应该是绿色的，显示他们当前在该页面上。我的问题是它什么都没做。这是我的小提琴，这是w3学校的网页，我从中得到了我的例子，我从中复制，但没有工作 CSS 身体{ 背景：黑色； } 保险商实验室{ 列表样式类型：无；保证金：0；填充：0；溢出：隐藏；背景色：#333； } 李{ 浮动：左； } 李阿{ 显示：块；颜色：白色；填充：14px 16px；文字装饰：无； } li a:悬停：未（.active）{ 背景色：

我正在尝试实现活动/当前导航链接，以便用户在某个导航链接上的活动内容应该是绿色的，显示他们当前在该页面上。我的问题是它什么都没做。这是我的小提琴，这是w3学校的网页，我从中得到了我的例子，我从中复制，但没有工作

CSS


身体{
背景：黑色；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
填充：14px 16px；
文字装饰：无；
}
li a:悬停：未（.active）{
背景色：#111；
}
.主动{
背景色：#4CAF50；
}

您忘记在菜单上添加活动类。


<!DOCTYPE html>

<html>
    <head>
        <title>Ryder Practice</title>
        <link rel="stylesheet" type="text/css" href="/inc/styles/styles.css">
    </head>
    <body>

        <ul class="menuBar">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#about">About</a></li>
        </ul>
    </body>
</html>


<!-- Stylesheet -->
body{
    background: black;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #111;
}

li .active {
    background-color: #4CAF50;
}

div.menuBar li.active a { color: #FF0000; } 

li.active { background-color: red; }

莱德公司






身体{
背景：黑色；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
填充：14px 16px；
文字装饰：无；
}
li a:悬停：未（.active）{
背景色：#111；
}
李，活跃{
背景色：#4CAF50；
}
div.menuBar li.active a{color:#FF0000；}
li.active{背景色：红色；}


莱德公司






身体{
背景：黑色；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
填充：14px 16px；
文字装饰：无；
}
li a:悬停：未（.active）{
背景色：#111；
}
李，活跃{
背景色：#4CAF50；
}
div.menuBar li.active a{color:#FF0000；}
li.active{背景色：红色；}

<!DOCTYPE html>

<html>
    <head>
        <title>Ryder Practice</title>
        <link rel="stylesheet" type="text/css" href="/inc/styles/styles.css">
    </head>
    <body>

        <ul class="menuBar">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#about">About</a></li>
        </ul>
    </body>
</html>


<!-- Stylesheet -->
body{
    background: black;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #111;
}

li .active {
    background-color: #4CAF50;
}

div.menuBar li.active a { color: #FF0000; } 

li.active { background-color: red; }