Question

我使用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>

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>

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

选择元素而不选择后代

1 个答案: