我如何 select 仅 first-level children 一个元素

Question

如何 select 所有 first-level div 下面标记的元素：

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

当我使用通配符 select 或者它也 selects 后代。我只想要 first-level children。如何仅使用 css？

Answer 1

with css select 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>

Answer 2

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

首先你设置你的风格，因为你希望它在你的第一级 child 元素上看起来，你可以使用 reset 规则 parentEl -> everything -> everything --> #el > * > * 将样式重置为它的默认设置。本质上，这表示 每个 child 元素 of every child element that is a child of the parent 元素.

注意： 请记住，您在 initial first-level of children 需要在 div > * > * 重置规则中重置为默认样式。

虽然这不是必需的，但您可以使用 :root 将默认样式设置为 css 变量，这样您就可以将它们合而为一area，你的根元素属性，然后在你的 reset css properties.

上调用它们

查看以下代码片段：

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

我如何 select 仅 first-level children 一个元素

How do I select only first-level children of an element

html

css

css-selectors

wildcard

children