3 уровень ul li ul li liststyle css задача

Question

Я не буду вдаваться в подробности. У меня есть неупорядоченный список, но стиль не работает. надеюсь, ты сможешь мне помочь!

Мой HTML-код:

<ul id="sitemap-list">
    <li><a href="#" onclick="">LEV0</a>
        <ul>
            <li><a href="#" onclick="">LEV11</a></li>
            <li><a href="#" onclick="">LEV1</a></li>
        </ul>
    </li>

    <li><a href="#" onclick="">LEV0</a>
         <ul>
            <li><a href="#" onclick="">LEV1</a>
                <ul>
                    <li><a href="#" onclick="">LEV2</a></li>
                    <li><a href="#" onclick="">LEV2</a></li>
                </ul>
            </li>
         </ul>
    </li>
</ul>

И мой код CSS:

#sitemap-list li ul li a {
    display: block;
    text-decoration: none;
    list-style-type: none;
    color: red;
    margin-left:  20px;
    margin-top: -5px;
}

#sitemap-list ul li ul li a {
    display: block;
    text-decoration: none;
    list-style-type: none;
    color: #6e90a6;
    margin-left:  50px;
}

Проблема в том, что первый блок "css" стилизует все элементы списка с помощью тега a.

Что я делаю не так?

спасибо за вашу помощь:)

Answer 1

Селектор A B является селектором потомка и соответствует любому B элементу, который является потомком A элемента , независимо от того, является ли он прямым потомком дочерний узел элемента A) или, если это просто переходный нисходящий элемент (например, дочерний узел дочернего узла элемента A).

Если вы хотите выбрать только непосредственные дочерние узлы, используйте дочерний селектор A > B:

#sitemap-list > li > ul > li > a { /* … */ }
#sitemap-list > li > ul > li > ul > li > a { /* … */ }

Но поскольку Internet Explorer не поддерживает дочерний селектор, вам необходимо «сбросить» свойства, которые были перезаписаны, например, margin-top свойство:

#sitemap-list ul li ul li a {
    margin-top: 0;
}