Question

我是CSS的新学习者。关于伪类，我做错了，因为我的代码不起作用。

＆＃13;

<!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>

＆＃13;

任何可以告诉我我做错了什么的人？

谢谢。

Answer 1

应该是

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

和

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

因为a是.navigationbar

的子元素

Answer 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>

伪类＆amp; CSS中的类

2 个答案: