css - CSS：如何从最后一个子元素的一个 brfore 标记 i 类的颜色

Question

<div>
    <li>
        <span> text1 </span>
        <icon> icon </icon>
    </li>
    <li>
        <span> text1 </span>
        <icon> icon </icon>
    </li>
    <li>
        <span> text1 </span>
        <icon> icon </icon>
    </li>
    <li>
        <span> text1 </span>
    </li>
</div>

我可以标记last-child但无法标记图标。

我想在它之前标记我的活动li颜色icon。

任何关于 SCSS 的建议。

标签： csssasscss-selectors

Answer 1

我建议更改 HTML 结构。图标应该由导致图标的项目创建。第一项不需要图标，因为它是第一项（根项），也不需要知道是否有子项。

div li:last-child {
  color:red;
}

<div>
  <li>
    <span> text1 </span>
  </li>
  <li>
    <icon> icon </icon>
    <span> text1 </span>
  </li>
  <li>
    <icon> icon </icon>
    <span> text1 </span>
  </li>
  <li>
    <icon> icon </icon>
    <span> text1 </span>
  </li>
</div>

如果您无法更改 HTML，您可以使用以下解决方案：

div li:nth-last-child(2) icon {
  color:red;
}
div li:last-child {
  color:red;
}

<div>
  <li>
    <span> text1 </span>
    <icon> icon </icon>
  </li>
  <li>
    <span> text1 </span>
    <icon> icon </icon>
  </li>
  <li>
    <span> text1 </span>
    <icon> icon </icon>
  </li>
  <li>
    <span> text1 </span>
  </li>
</div>