FORUM.Classe A: não funciona
este algoritmo parou de funcionar na minha página (já tinha funcionado há mais de um ano):
<div class="classA" id="specific1">
<a href="#">Link Text</a>
</div>
.classA a {
style: actual style;
}
A etiqueta a já não apanha o Estilo Na css. Agora, a fim de que minhas etiquetas a para pegar o estilo eu tenho que dar-lhes uma classe especificamente e isso funciona:
<div class="classA" id="specific1">
<a class="classB" href="#">Link Text</a>
</div>
Alguma coisa mudou recentemente na IE7 ou FireFox4 que quebrasse o primeiro algoritmo? Eu prefiro corrigir o css em vez de inserir uma classe em todas as etiquetas a relevantes em várias pagina.
Editar para mostrar melhor o estilo actual:
Isto já não funciona (as ligações têm estilo vanilla 100%-Blue-sublinhado), mas já estava a funcionar há algum tempo. Note que foi projetado pela primeira vez para o IE6, sobreviveu à mudança para o IE7, mas posteriormente parou de pegar seu estilo. Espero que isto ajude todos vocês que graciosamente tentaram responder!
-- HTML --
<div class="ovalButton" id="oval1"><a href="#">LinkText</a></div>
-- CSS --
* {
margin: 0;
padding: 0;
overflow: hidden;
font-family: verdana, arial, sans-serif;
}
.ovalButton {
position: absolute;
width: 150px;
height: 60px;
}
.ovalbutton a {
background: url("logo_butn.gif") no-repeat;
display: block;
color: #0063B5;
width: 150px;
height: 60px;
overflow: hidden;
font-size: 80%;
font-weight: bold;
text-decoration: none;
padding: 16px 15px 20px 0;
text-align: center;
}
.ovalbutton a:Hover { background: url("logo_butn_highlight.gif") no-repeat; }
#oval1 { top: 12px; left: 300px; }
#oval1 a { padding-top: 25px; }
quando copio o estilo EXACTO .ovalbutton a {} a uma classe separada e aplicar essa classe à ligação em o html funciona bem.
5 answers
.ovalbutton a {
A capitalização não corresponde:
<div class="ovalButton"
Pode mudar o seu selector de CSS para .ovalButton a
para resolver este problema.
Não sabendo o seu CSS completo, não posso dizer com certeza, mas parece provável que esteja a deparar-se com um problema de especificidade CSS.
O problema com o seu código tal como indicado na sua pergunta é que a capitalização no selector de classe e CSS é diferente
ovalbutton vs ovalButton
Pode ver isto corrigido e a trabalhar em http://jsfiddle.net/5aKKR/1/ (sem imagens de fundo)
Nada mudou a este respeito e o teu selector deve funcionar.
Tente reproduzir o seu problema em páginas separadas e verá.