Как сделать внутренний список UL не наследуемым от внешнего списка UL в CSS

Question

Для списка HTML ниже, мне нужно добавить фоновое изображение только в LI внешнего списка.(он же с классом «menu-mlid-594 dhtml-menu расширенный старт-свернут»)

Коды HTML:

<li class="menu-mlid-594 dhtml-menu expanded start-collapsed ">
    About the Collection
    <ul class="menu">
        <li class="leaf first dhtml-menu ">By Theme</li>
        <li class="leaf last dhtml-menu ">By Individual</li>
    </ul>
</li>

Как это сделать?1007 * Спасибо.

Answer 1

li.menu-mlid-594 { your css rules here }

Вышеуказанное будет применяться только к элементам li, которые имеют класс menu-mlid-594

Answer 2

Трудно сказать, что будет работать с таким небольшим количеством контекстной информации, но в целом вам обычно нужно полагаться на каскадные правила:

#outerULIdentifier li {
    background-image: url('someImage.jpg');
}
#outerULIdentifier li li {
    background-image: none;
}

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

li.dhtml-menu {
    background-image: url('someImage.jpg');
}
li.dhtml-menu.leaf {
    background-image: none;
}

Хотя у этой последней версии могут быть проблемы в IE 6 (который не очень хорошо поддерживает несколько классов на одном элементе в селекторе CSS).

Answer 3

ul li {background:#F00;} /* First level */
ul li li {background:#FFF;} /* Second level */