css直接子元素—代码示例

CSS中的直接子元素选择器（>）是一种非常有用的选择器，它允许我们选择某个元素的直接子元素。这意味着只有那些作为父元素直接子元素的元素才会被选择。

假设我们有一个HTML结构如下：

<div class="93b4-50ce-107f-ba3d parent">
  <h1>标题</h1>
  <p>这是一个段落。</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>

如果我们想选择父元素`div`的直接子元素`h1`和`p`，我们可以使用以下CSS代码：

.parent > h1,
.parent > p {
  color: red;
}

上面的代码将选择`div`元素的直接子元素`h1`和`p`，并将它们的文字颜色设置为红色。请注意，`ul`元素及其子元素`li`不会被选择，因为它们不是`div`的直接子元素。

我们还可以使用直接子元素选择器来选择更深层次的元素。例如，如果我们有以下HTML结构：

<div class="ba3d-54d6-9290-edf5 parent">
  <div>
    <h1>标题</h1>
    <p>这是一个段落。</p>
  </div>
  <div>
    <h1>标题2</h1>
    <p>这是另一个段落。</p>
  </div>
</div>

如果我们只想选择`div`元素的直接子元素`h1`，我们可以使用以下CSS代码：

.parent > div > h1 {
  font-weight: bold;
}

上面的代码将选择`div`元素的直接子元素`div`的直接子元素`h1`，并将它们的字体加粗。

总结一下，CSS中的直接子元素选择器（>）允许我们选择某个元素的直接子元素。通过结合父元素和直接子元素的选择器，我们可以更精确地选择我们想要的元素，并对其应用样式。这在构建复杂的网页布局时非常有用。