селектор CSS не работает

Question

У меня есть некоторые CSS, как это:

#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; 
} 

И HTML, как это:

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

По какой-то причине #navbar уль Li часть не применяется, но #navbar ul li & #navbar ul есть. Я уверен, что он тоже работал. И он проходит проверку w3c. Это что-то очевидное/глупое?

Answer 1

Согласно CSS2 spec, селекторы не чувствительны к регистру в HTML-документе, но чувствительны к регистру в XHTML документах. Ваше третье правило заклинания navbar, которое отличается от фактического названия элемента, которое равно navBar.

Кроме того, некоторые браузеры действительно имеют ошибку и трактуют селекторы как чувствительные к регистру, даже если документ поставляется в формате HTML.

Answer 2

Я не уверен, но стараюсь быть чувствительны к регистру и писать

#navBar ul li a