css - 仅针对父级 li 而不是具有 css 的子级

Question

我想针对父 li，而不是仅使用 css 选择器的子 li。

<ul>
        <li>{Target the li of this ul only}</li>
        <li>{Target the li of this ul only}</li>
        <li>
            <ul>
                <li>{it would be different styling}</li>
                <li>{it would be different styling}</li>
                <li>{it would be different styling}</li>
            </ul>
        </li>
    </ul>

标签： csscss-selectors

Answer 1

给两个 ul 不同的课程，并将风格应用到他们的孩子 li

.a>li {
  color: green
}

.b>li {
  color: red
}

<ul class='a'>
  <li>{Target the li of this ul only}</li>
  <li>{Target the li of this ul only}</li>
  <li>
    <ul class='b'>
      <li>{it would be different styling}</li>
      <li>{it would be different styling}</li>
      <li>{it would be different styling}</li>
    </ul>
  </li>
</ul>