Применить стиль только для дочерних элементов на первом уровне

<ul>
  <li> <span> apply </span> </li>
  <li> <span> apply </span> </li>
  <li> 
    <ul>
      <li> <span> ignore </span> </li>
      <li> <span> ignore </span> </li>
    </ul>
  </li>
</ul>

Как применить правило CSS только для охвата элементов с первого уровня и сделать элементы span из вложенного списка игнорировать правило?

Можно ли это сделать без специального сброса свойств на уровнях второго уровня?

Пробовал ul > li span, но он, похоже, не работает, я также накладываю стили на 2-й уровень

Ответ 1

Поместите свой список в обертку div с идентификатором, например <div id="ul-wrapper">, и попробуйте:

#ul-wrapper > ul > li > span {
    /* my specific CSS */
}

Ответ 2

 #container >  ul > li span { /* - Your CSS Here - */  }

Необходимо указать контейнер, чтобы можно было выбрать только первый уровень ul.

Ответ 3

Пока родительский элемент внешнего ul не является другим li, вы можете использовать его как отправную точку для вашего селектора (например, предполагая, что он div):

div > ul > li span {
    /* Whatever */
}

Ответ 4

ul > li > span {border:solid 1px red;}
li > ul > li > span {border:none 1px red;};