css - 仅将类应用于具有类的元素而不是所有子元素

Question

我只需要将样式应用到类为“red”的元素。我如何避免将类(class)应用于流镇的所有 child ？

.red {
  color: red
}

<ul>
  <li>item</li>
  <li class="red">item
    <ul>
      <li>item</li>
      <li class="red">item</li>
      <li>item</li>
    </ul>
  </li>
</ul>

Answer 1

使用 > * 将 CSS 应用于 .red 的所有直接子级。将 color 重置为 initial 以忽略任何先前的样式(来自元素的父级)。

.red {
  color: red
}

.red > * {
  color: initial;
}

<ul>
  <li>item</li>
  <li class="red">item
    <ul>
      <li>item</li>
      <li class="red">item</li>
      <li>item</li>
    </ul>
  </li>
</ul>