概述

element>element 选择器用于选择一个元素的直接子元素。它仅选择与父元素具有直接父子关系的子元素，而不选择嵌套的子元素。

语法

------- - ------- -
  -- -- --
-

用法

element>element 选择器可用于以下场景：

• 选择特定父元素的直接子元素：例如，要选择 body 元素的直接子元素 h1，可以使用以下选择器：

---- - -- -
  -- -- --
-

• 选择特定父元素的第一个直接子元素：要选择 ul 元素的第一个直接子元素 li，可以使用以下选择器：

-- - -------------- -
  -- -- --
-

• 选择特定父元素的最后一个直接子元素：要选择 div 元素的最后一个直接子元素 p，可以使用以下选择器：

--- - ------------ -
  -- -- --
-

示例

以下是一些使用 element>element 选择器的示例：

• 选择 main 元素的直接子元素 section：

---- - ------- -
  ----------------- --------
  -------- -----
-

• 选择 ul 元素的直接子元素 li，并为其添加边框：

-- - -- -
  ------- --- ----- -----
-

• 选择 form 元素的第一个直接子元素 input，并将其文本对齐居中：

---- - ----------------- -
  ----------- -------
-

注意事项

• element>element 选择器只选择直接子元素。如果子元素嵌套在另一个元素中，则不会被选择。
• 与其他选择器（如 element element）不同，element>element 选择器不会选择父元素的孙元素或更深层级的后代元素。