CSS中的伪类和类答案

【问题标题】：Pseudo classes & classes in CSSCSS中的伪类和类
【发布时间】：2015-02-03 11:13:23
【问题描述】：

我是 CSS 的新手。关于伪类，我做错了一些事情，因为我的代码不起作用。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul.navigationbar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}

li.navigationbar {
float: left;
padding: 10px;
}

a.navigationbar:link, a.navigationbar:visited {
display: block;
        width: 120px;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #98bf21;
        text-align: center;
        padding: 4px;
        text-decoration: none;
text-transform: uppercase;
}

a.navigationbar:hover, a.navigationbar:active {
background-color: #7A991A;
}</style>
</head>
<body>
<ul class="navigationbar">
<li class="navigationbar" role="presentation"><a href="#">Inicio</a></li>
<li class="navigationbar" role="presentation"><a href="#">Proveedores</a></li>
<li class="navigationbar" role="presentation"><a href="#">Artículos</a></li>
<li class="navigationbar" role="presentation"><a href="#">Contacto</a></li>
</ul>
</body>
</html>

谁能告诉我我做错了什么？

谢谢。

【问题讨论】：

似乎是什么问题？
究竟是什么doesn't work？
并确保如果某人的答案是正确的，则将其标记为正确。

标签： css html class pseudo-class

【解决方案1】：

应该是

 .navigationbar a:link {
/*some styles*/
}

和

 .navigationbar a:visited {
/*some styles*/
}

因为a 是.navigationbar 的子元素

【讨论】：

【解决方案2】：

这个a.navigationbar:link, a.navigationbar:visited 不工作，因为 navigationbar 类在您的标记中分配给列表元素li，而不是锚点a 元素。

<li class="navigationbar" role="presentation"><a href="#">Inicio</a></li>

为了解决这个问题，把它改成

[role=presentation] a:link, [role=presentation] a:visited

或到

li.navigationbar a:link, li.navigationbar a:visited

这是最终的演示

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul.navigationbar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}

li.navigationbar {
float: left;
padding: 10px;
}

li.navigationbar a:link, li.navigationbar a:visited {
display: block;
        width: 120px;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #98bf21;
        text-align: center;
        padding: 4px;
        text-decoration: none;
text-transform: uppercase;
}

a.navigationbar:hover, a.navigationbar:active {
background-color: #7A991A;
}</style>
</head>
<body>
<ul class="navigationbar">
<li class="navigationbar" role="presentation"><a href="#">Inicio</a></li>
<li class="navigationbar" role="presentation"><a href="#">Proveedores</a></li>
<li class="navigationbar" role="presentation"><a href="#">Artículos</a></li>
<li class="navigationbar" role="presentation"><a href="#">Contacto</a></li>
</ul>
</body>
</html>

【讨论】：