时间戳

首页 > 解决方案 > 仅将类应用于具有该类的元素而不是所有子元素

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

问题描述

我只需要将样式应用于具有“红色”类的元素。我如何避免将课程应用于溪流中的所有儿童？

.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>

标签： css

解决方案

.red将 CSS 应用于using的所有直接子级> *。重置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>

推荐阅读