html - 为什么当前页面链接在我的代码中没有什么不同？

Question

这是我的导航栏样式，但它不起作用……我是 CSS 样式的新学习者，请帮助我如何做到这一点……我的活动 ID 不起作用我不知道错误在哪里……

 #navibar 
 {
 list-style-type:none;
 font-family:"Verdana";
 letter-spacing:5px;
 width:180px;
 padding:5px;
 margin-left:20px;
 }
 #navibar li
 {
 padding:10px;
 }
 #navibar li a
 {
 text-decoration:none;
 color:#333333;
 font-size:20px;
 padding:5px;
 transition:padding-left 1s;
 -moz-transition:padding-left 1s;
 -webkit-transition:padding-left 1s;
 -o-transition:padding-left 1s;
 }
 #navibar li a:hover
 { 
 color:#fff;
 background-image:url(ul.png);
 background-position:left;
 background-repeat:no-repeat;
 padding-left:20px;
 }

#active li a:link
{
color:#fff;
background-image:url(ul.png);
background-position:left;
background-repeat:no-repeat;
padding-left:20px;
}
</style>

这是我的html代码

<ul id="navibar">
    <li><a id="active" href="">Stories</a></li>
    <li><a href="">About Me</a></li>
    <li><a href="">Projects</a></li>
    <li><a href="">Contact</a></li>
</ul>

我在这里创建了一个小提琴

提前感谢

Answer 1

编辑：

取决于你的CSS，这会做你想要的

#navibar li a#active

原帖：

#active li a:link

您上面的代码会将设置应用到 ID“活动”内的“li”内的“链接”。

你想要的是

li #active

或者

ul li #active

要不就

#active

管他呢 ;-）