Псевдо классы и классы в CSS

Я новый ученик CSS. Есть что-то, что я делаю неправильно, относительно псевдо классов, потому что мой код не работает.Псевдо классы и классы в 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>

Любой, кто может сказать мне, что я делаю неправильно?

спасибо.

источник

2015-02-03 Nathalie

Что, по-видимому, проблема? –

Что именно 'не работает'? – Edper

и убедитесь, что если чей-то ответ правильный, отметьте его как таковой. –

Это должно быть

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

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

потому что a является дочерним элементом .navigationbar

источник

2015-02-03 02:59:01

Это 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

Вот окончательный Demo

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

источник

2015-02-03 03:13:23

Псевдо классы и классы в CSS

ответ

Смежные вопросы