Question

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

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

当我使用通配符选择器时，它也会选择后代。我只想要一级孩子。只用 css 怎么办？

Answer 1

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

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

注意：请记住，您在初始第一级< /em> 子项需要在 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>

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

如何只选择元素的第一级子元素

2 个答案: