Примените цвет фона к li, но не к вложенным

Question

У меня есть вложенные ul / li, и проблема в том, что если вы добавляете цвет фона в верхний li, потому что в нем есть вложенные элементы, то весь список будет иметь этот цвет фона, а не только верхний li (полагаюэто происходит потому, что он увеличивает высоту верхнего уровня li).

Возможно ли применить цвет фона только к верхнему значению li?

Надеюсь, это имеет смысл!

Answer 1

Существует селектор отношений >, который означает «непосредственные дети»:

ul > li {
    background-color: <your color>;
}

, но у меня были проблемы с кросс-платформенной совместимостью при его использовании.Что вы также можете сделать, это настроить несколько уровней правил:

ul li {
    background-color: <your color>;
}

ul li li {
    background-color: none;
}

Answer 2

Вы говорите о верхнем li, но я думаю, что вы имеете в виду корень li, который также имеет дочерние элементы, содержащие li элементы. В этом случае вы можете установить цвет фона следующим образом:

.myroot>ul>li { background-color: Yellow }

Примечание: в приведенном выше примере требуется элемент-обертка (обычно DIV) с именем класса "myroot".

Подробнее о дочерних селекторах CSS см. в этой статье .

Answer 3

Что я понимаю, так это то, что у вас есть UL с LI (назовем его «родительским»), и что LI также имеет UL с LI (давайте назовем их дочерними) в нем? Вы применяете фон к родителю, и он также виден под ребенком?

Поскольку ребенок находится ВНУТРИ родителя, он должен изменить его рост, поэтому фон больше, чем у него, есть 2 способа заблокировать это, вы могли бы (как упоминалось ранее) поставить другой фон ребенку, или вы могли бы поместите что-то вроде SPAN в родительский объект и поместите фон в SPAN вместо LI.parent.

Answer 4

Дети всегда наследуют атрибуты от родителей; именно поэтому она называется Каскадные Таблицы стилей.

Я предлагаю назначить всем li элементам цвет фона по умолчанию и просто переопределить его для элементов верхнего уровня (например, с помощью специального класса).

Answer 5

Это зависит от вашего CSS. Вы можете определить класс li верхнего уровня и использовать его для установки цвета фона.

Answer 6

используйте jquery и присвойте первому классу специальный класс

`$("ul li:first")`.addClass('special_bg')

= получить только первый <-li-> элемент <-ul->

Answer 7

ну, вы всегда можете применить другой цвет фона для дочернего ли.