Селектор 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 ul li часть не применяется, но #navbar ul li & #navbar ul. Я уверен, что раньше это тоже работало. И это проходит проверку w3c. Это что-то очевидное / глупое?

Answer 1

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

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

Answer 2

Я не уверен, но постарайтесь учесть регистр и напишите

#navBar ul li a