CSS точный дочерний селектор

Question

Я знаю, что знак «больше» (>) выберет точного потомка, а не вложенного

, но в этом примере все <li> становятся черными BG

<div id="content">
  <ul>
    <li>List Item With ul
        <ul>
            <li>Sub list item</li>
            <li>Sub list item</li>
            <li>Sub list item</li>
        </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
</div>

CSS:

#content > ul li {
   background: black;
   color: white;
}

как правило, черный BG не должен быть для Элемент подсписка , но здесь он применяется ко всем <li> (должен быть только для Элемент списка с )

http://jsfiddle.net/4j1zv25b/

Answer 1

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

#content > ul > li {
   background: black;
   color: white;
}

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

#content>ul>li {
  background: black;
  color: white;
}

#content li li {
  background: white;
  color: black;
}

<div id="content">
  <ul>
    <li>List Item With ul
      <ul>
        <li>Sub list item</li>
        <li>Sub list item</li>
        <li>Sub list item</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
</div>

Answer 2

Поведение, которое вы описали, является правильным, потому что вы просили прямого ul ребенка #content стилизовать это поведение Ли.

То, что Ли дал вам детей, не отменяет его последствий. Поскольку дети попадают в рамки первоначальной целевой Ли, они будут оформлены в соответствии с их родителями.

Я приложил потенциальный вариант, который вы, возможно, ищете, который должен стилизовать только первый li в подкатегориях.

Я также приложил еще один пример, который мог бы лучше проиллюстрировать мою точку зрения. Представьте себе Div, внутри которого есть еще один Div, а внутри дочернего Div есть тег абзаца.

Если вы стилизуете прямого потомка первого элемента div, вы можете ожидать, что тег абзаца будет по-прежнему иметь черный фон, поскольку его родитель является целевым элементом div. P не применяет противоположный стиль для компенсации, потому что зачем?

#content>ul li {
  background: black;
  color: white;
}

#desired>ul li ul li:first-child {
  background: black;
  color: white;
}

#example > div {
background: black;
color: white;
}

<div id="content">
  <ul>
    <li>List Item With ul
      <ul>
        <li>Sub list item</li>
        <li>Sub list item</li>
        <li>Sub list item</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
</div>

<div id="desired">
  <ul>
    <li>List Item With ul
      <ul>
        <li>Sub list item</li>
        <li>Sub list item</li>
        <li>Sub list item</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
</div>

<div id="example">
  <div>
    <p>Still styled</p>
  </div>
</div>

Answer 3

почему вы также не выбираете элементы внутреннего списка

#content > ul li {background: black;
    color: white;}


#content > ul li li {
    background: white;
    color: black;
 }

Answer 4

Символ «больше» (>) выбирает прямого потомка родителя, но внуки все равно будут наследовать его.

Чтобы выбрать внука, вам понадобится ul li ul li или ul > li > ul > li

Вы также можете использовать дочерние селекторы, такие как:

:first-child
:nth-child(n)
:last-child

Подробнее о селекторах CSS можно узнать здесь https://www.w3schools.com/cssref/css_selectors.asp