Странное поведение дочернего селектора

Question

Ну, я наконец решил полностью отказаться от IE6.Это великолепно.Первое большое преимущество, которое приходит с этим решением, - выбор детей.Поэтому я впервые начал использовать их для своих вложенных выпадающих меню и ожидал, что это будет проще простого.Но ... вот код:

<style>
body {
    color:#000;
}

ul.top > li {
    color:red;
}

<ul class="top">
    <li>top li</li>
    <li>
        <ul class="sub">
           <li>sub li</li>
        <li>sub li</li>
        </ul>
    </li>
</ul>

То, что я ожидал здесь, это только непосредственные дети .top неупорядоченный список окрашен в красный цвет, а все остальные - в черный.Разве это не логично?Но все они на самом деле становятся красными ...

Answer 1

попробуй

ul.top > li {
    color:red;
}

ul.sub > li {
    color:black;
}

??

Answer 2

Тим дал вам решение. Это объясняется тем, что хотя color: red; применяется только к верхнему уровню li s, цвет наследуется их потомками. Проверьте Наследование CSS в Dorward Online для подробного объяснения.

Answer 3

Хорошо, вы видите, что красный цвет применяется как к первому, так и ко второму элементу в списке .top, теперь у второго элемента нет никакой информации о стиле для примененного цвета, поэтому он использует стиль родительской цвет красный.

Answer 4

К сожалению, дочерний селектор заставляет все li наследовать класс.Так что вам нужно определить другого ребенка ul.sub > li{