CSS для эффекта "li", только если дочерний элемент определенной "ul"

Question

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

<ul id="vertical_menu">
    <li>Home</li>
    <li>Subitem 1</li>
    <li>Subitem 2</li>
</ul>

Теперь мне нужно добавить границы к элементам "элемента списка" li, только если это дочерний элемент ul сid vertical_menu.

Есть идеи, как это сделать?

Answer 1

ul#vertical_menu > li
{
    /* apply li styles here as needed */
    border: 1px solid #000;
}

ul#vertical_menu описывает элемент ul с идентификатором 'vertical_menu'. > li описывает прямой дочерний элемент типа li. Любые стили, перечисленные здесь, будут применяться к элементам li так, как вы хотели.

Если вам требуется поддержка IE6, дочерний селектор > будет проблемой. Чтобы обойти это, нужно применить стилизацию к одному уровню li и "сбросить" его для дальнейшего вложенного li, например:

ul#vertical_menu li
{
    border: 1px solid #000;
}
ul#vertical_menu li li
{
    border: none;
}

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

В HTML-разметке идентификаторы элементов должны быть уникальными, поэтому в действительности вам также не нужно выбирать с помощью ul и вы можете просто использовать #vertical_menu > li или #vertical_menu li. Включение ul в селектор очень строго. Каждому свое ..

Answer 2

Этот селектор точно соответствует тому, что вы спрашиваете:

ul#vertical_menu > li

Если ваша разметка всегда будет иметь один уровень li элементов под этим ul и / или только IDбудет назначен только на ul, а не на какой-либо другой тип элемента (каким он должен быть, для согласованности сайта), есть ряд других способов выбрать те же элементы, например:

ul#vertical_menu li /* Assumes only one level of <li> */
#vertical_menu > li /* Assumes only this <ul> has the ID */
#vertical_menu li   /* Assumes both of the above */

Эти альтернативы полезны, если требуется поддержка IE6, так как он не поддерживает комбинатор >, но все они так или иначе зависят от структуры вашего HTML.

Answer 3

Попробуйте это:

ul#vertical_menu > li{
border:1px;
}

Стоит отметить, что использование селектора> не работает в более старых версиях Internet Explorer (я полагаю, IE6), поэтому, если вы ищете также поддержку,

ul#vertical_menu li

также будет работать (но он будет применять границу к каждому элементу списка в #vertical_menu, даже если это подменю.

Answer 4

просто сделай

ul#vertical_menu li{
 border:1px solid #CCC;

Не забудьте использовать ul, так как это сделает специфику css более понятной и стилизует только элементы li, которые находятся под ul. надеюсь, что это сработает для вас.

Answer 5

Оба ответа верны. В то время как ul#vertical_menu li нацелен на все li с из ul#vertical_menu, ul#vertical_menu > li нацелен только на первая строка li потомков.

Например, при использовании последнего селектора будет нацелен только id=one li:

<ul id="vertical_menu">
    <li id="one"></li>
    <another-element>
        <li id="two"></li>
    </another-element>
</ul>

Answer 6

#vertical_menu > li { border: 1px solid black; } 

Должно работать, но IE6 понадобится

#vertical_menu li { border: 1px solid black; }