Блог

Главная - Вопросы по программированию - Как запретить селектору CSS выбирать все дочерние элементы

Как запретить селектору CSS выбирать все дочерние элементы

#html #css

#HTML #css

Вопрос:

У меня есть список с несколькими вложенными списками внутри него, вот так:

 <ul class="menuSports">
    <li>
        <ul>
            <li>
                <ul>
                    <li>
                    <li>
                </ul>
            </li>
        </ul>
    </li>
<ul>

и я использую элемент before для создания стрелки, чтобы элементы отображались как выпадающий список:

 #menuSports li ul li:before { content: '25BA'; position:absolute; color:#cecece; padding-left: 5px; padding-top:5px;}

Проблема в том, что элемент before применяется ко всем элементам li, начиная с указанного, примерно так:

 #menuSports li ul li:before { content: '25BA'; position:absolute; color:#cecece; padding-left: 5px; padding-top:5px;}
#menuSports li ul li ul li:before { content: '25BA'; position:absolute; color:#cecece; padding-left: 5px; padding-top:5px;}

Есть ли способ предотвратить это, чтобы элементу присваивался только li, указанный в первом селекторе?

P.S Я не могу изменить HTML-код или использовать javascript, использование css — мой единственный вариант.

Комментарии:

1. Просто используйте > для выбора вложенного элемента. Таким образом, вы найдете только вложенные в этот элемент, а не все из них. Что-то вроде этого — ‘#menuSports>ul>li’.

Ответ №1:

 ul li { margin: 0 0 5px 0; }
ul > li { margin: 0 0 5px 0; }

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

Второй селектор выше — это селектор дочернего комбинатора. Это означает, что он будет выбирать только элементы списка, которые являются прямыми дочерними элементами неупорядоченного списка. Другими словами, он выглядит только на один уровень ниже структуры разметки, не глубже. Поэтому, если был другой неупорядоченный список, вложенный глубже, этот селектор не будет нацелен на дочерние элементы этого списка.

Для получения дополнительной информации попробуйте эту ссылку

Ответ №2:

Вы можете указать уровень (ы) LI использования descendant селектора.

Итак,

 #menuSports > li {/* only first level LIs */}
#menuSports > li > ul > li {/* only second level LIs */}
#menuSports > li > ul > li > ul > li {/* only third level LIs */}

Альтернативой является сброс стилей для следующих уровней

 #menuSports li li:before {content: 'content'; /* second and each nest level LIs */}
#menuSports li li li li:before {content: ''; /* fourth and each next are reseted */}