时间戳

首页 > 解决方案 > 选择一个元素而不选择后代

html - 选择一个元素而不选择后代

问题描述

我使用 CSS Modules 为我的标签生成随机类名。如何在不选择后代的情况下选择特定类型的元素？到目前为止，我已经尝试使用选择器: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>

标签： htmlcsscss-selectorscss-modules

解决方案

使用 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 选择器之间。它只匹配第二个选择器匹配的那些元素，这些元素是第一个选择器匹配的元素的直接子元素。

推荐阅读