Select 没有选择后代的元素

Question

我使用 CSS 模块为我的标签生成随机 class 名称。我如何 select 没有 select 后代的特定类型的元素？到目前为止，我试过像这样使用 select 或 :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>

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

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

Select 没有选择后代的元素

Select an element without selecting descendants

html

css

css-selectors

css-modules