直接子代

在 HTML 和 CSS 中，“直接子代”（也称为“子元素”）是指一个元素的直接子元素，也就是说，它们是父元素的第一层嵌套元素。

在 CSS 选择器中，直接子代可用于只选择父元素的直接子元素。这是非常有用的，因为它允许您针对特定的 HTML 结构应用样式。

要选择直接子元素，请使用“>”符号来将父元素和其直接子元素分隔开。

语法

以下是直接子代选择器的语法：

parent > child {
  /* styles */
}

其中，“parent”是父元素的选择器，“child”是父元素的直接子元素的选择器。在上面的示例中，样式只适用于父元素的直接子元素，而不适用于孙元素。

实例

以下示例演示如何使用直接子代选择器。

HTML 代码：

<div class="parent">
  <div class="child">
    <p>孙元素 1</p>
    <p>孙元素 2</p>
  </div>
  <div class="child">
    <p>孙元素 3</p>
  </div>
  <p>非子元素</p>
</div>

CSS 代码：

.parent > .child {
  background-color: lightblue;
}

在上面的示例中，样式仅适用于 ".parent" 元素的直接子元素 ".child"，而不适用于位于子元素内部的孙子元素。因此，孙元素的背景颜色保持不变。

总结

通过使用直接子代选择器，您可以在 HTML 和 CSS 中更精细地控制元素样式。这是一种非常有用的技能，值得学习。