如何仅选择元素的第一级子项[关闭]答案

【问题标题】：How do I select only first-level children of an element [closed]如何仅选择元素的第一级子项[关闭]
【发布时间】：2021-08-24 00:14:00
【问题描述】：

如何选择下面标记的所有一级div元素：

<div>
  <a>         //
    <span></span>
  </a>
  <ul>         //
    <li></li>
    <li></li>
  </ul>
  <div>         //
    <div></div>
  </div>
  <span>         //
  </span>
</div>

当我使用通配符选择器时，它也会选择后代。我只想要第一级的孩子。我如何仅使用 css 来做到这一点？

【问题讨论】：

这只是一个例子。我想选择具有不同类/ID的不同元素
嗯，不清楚。您需要发布您想要选择的所有内容。我删除的解决方案也需要一些更改。如果它有一个类，那么你可以简单地使用.className > div
编辑显示多个标签
您实际上想选择什么？您更新的代码并没有使其更清晰。原因：除非另有说明，否则您的所有孩子都将继承父样式。
您要选择第一级 div 元素（如您的文本中所示）还是第一级元素（如您的代码中标记的那样）？考虑到您发布的代码，我认为您不能这样做 - 顶级 div 需要更多定义，否则您冒着在树下更远的地方拾取 div 的风险，这些 div 也有孩子。如果 div 是 body 例如或某个已知容器的直接子级，那么它是可能的。

标签： html css css-selectors wildcard children

【解决方案1】：

您可以针对此问题使用 CSS 重置规则。

首先你设置你希望它在你的第一级子元素上的样式，你可以使用一个reset规则parentEl -> Everything -> Everything --> #el > * > * 将样式重置为默认设置。本质上，这表示 每个子元素 中的 每个子元素，它是父元素的子元素。

注意：请记住，您在初始中设置的任何样式第一级 个子项需要在 div > * > * 重置规则中重置为其默认样式。

虽然这不是必需的，但您可以使用 :root 将默认样式设置为 css 变量，这样您就可以将它们全部放在一个区域，即根元素属性中，然后调用它们在您的重置 css 属性上。

请参阅以下代码段：

:root {
  --def-color: black; 
}

div > * {
  color: red;
}
/* reset rule */
div > * > * {
  color: var(--def-color);
}

<div>
  <a>child level 1    //   
    <span>span child lvl 2</span>
    <div>div child lvl 2</div>
  </a>
  <ul>ul child level 1        //
    <li>li child level 2</li>
    <li>li child level 2</li>
    <li>
      <ul>ul child lvl 3
        <li>li child level 4</li>
      </ul>
    </li>
  </ul>
  <div>child level 1         //
    <div>child level 2
      <div>child level 3</div>
    </div>
  </div>
  <span>child level 1       //
  </span>
</div>

【讨论】：

【解决方案2】：

用 css 选择 div div:nth-child(1)

示例：

#big-div div:nth-child(1) {
  margin: 5px;
}

<div id="big-div">
        <div>         
          <div>1.text</div>
        </div>
        <div>         
          <div>2.text</div>
          <div>3.text</div>
        </div>
        <div>         
          <div>4.text</div>
        </div>
        <div>        
        </div>
    </div>

【讨论】：