选择一个元素而不选择后代[重复]答案

【问题标题】：Select an element without selecting descendants [duplicate]选择一个元素而不选择后代[重复]
【发布时间】：2020-12-04 09:40:49
【问题描述】：

我使用 CSS 模块为我的标签生成随机的类名。如何在不选择后代的情况下选择特定类型的元素？到目前为止，我已经尝试像这样使用选择器 :first-of-type 和 :first-child：

.settings ul:first-of-type > i:first-child {
    opacity: 0.5;
}

但结果是我的规则适用于我页面上的每个 <i> 元素。

HTML：

<div class="settings">
    <ul>
        <li>
            <i>Select this element</i>
            <ul>
                <li>
                    <i>but not this one</i>
                    <span></span>
                </li>
                <li>
                    <i>or not this one</i>
                    <span></span>
                </li>
            </ul>
        </li>
    </ul>
</div>

【问题讨论】：

此答案stackoverflow.com/questions/2717480/… 中有关“第一”选择器的非常有用的材料。 OP可能感兴趣也可能不感兴趣，但对这个主题有有用的背景。

标签： html css css-selectors css-modules

【解决方案1】：

使用 CSS 子组合子 >:

.settings > ul > li > i {
  opacity: 0.5;
}

<div class="settings">
  <ul>
    <li>
      <i>Select this element</i>
      <ul>
        <li>
          <i>but not this one</i>
          <span></span>
        </li>
        <li>
          <i>or not this one</i>
          <span></span>
        </li>
      </ul>
    </li>
  </ul>
</div>

子组合器 (>) 放置在两个 CSS 选择器之间。它仅匹配与第二个选择器匹配的那些元素第一个匹配的元素的直接子元素。

【讨论】：