sélecteur CSS ne fonctionne pas

Question

J'ai quelques CSS comme ceci:

#navBar ul 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

#navBar ul li 
{ 
    border: thin dashed #ffff00; 
    display:inline; 
    margin:0; 
    padding:0; 
} 

#navbar ul li a 
{ 
    border: 1px solid #707070; 
    text-decoration: none; 
    padding: 0; 
    margin: 0; 
    background-color: #909090; 
} 

Et HTML comme ceci:

<div id="navBar"> 
     <ul> 
     <li><a href="#" >Home</a></li> 
     <li><a href="#" >Services</a></li> 
     <li><a href="#" >About us</a></li> 
     <li><a href="#" >Blog</a></li> 
     <li><a href="#" >Contact</a></li> 
     </ul> 
    </div> 

Pour une raison quelconque la #navbar ul li une partie n'est pas appliquée, mais le #navbar ul li & #navbar ul sont. Je suis sûr que ça marchait aussi. Et il passe la validation W3C. Est-ce quelque chose d'évident/stupide?

Answer 1

Comme par CSS2 spec, les sélectionneurs ne sont pas sensibles à la casse dans le document HTML, mais sont sensibles à la casse dans les documents XHTML. Votre troisième règle est navbar, ce qui est différent du nom de l'électeur réel navBar.

De plus, certains navigateurs ont en fait un bug et traitent les sélecteurs comme sensibles à la casse même si le document est livré en HTML.

Answer 2

Je ne suis pas sûr, mais essayez d'être sensible à la casse et écrire

#navBar ul li a