概述

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

语法

element > element {
  /* 样式 */
}

用法

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

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

body > h1 {
  /* 样式 */
}

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

ul > li:first-child {
  /* 样式 */
}

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

div > p:last-child {
  /* 样式 */
}

示例

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

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

main > section {
  background-color: #f0f0f0;
  padding: 1rem;
}

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

ul > li {
  border: 1px solid #ccc;
}

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

form > input:first-child {
  text-align: center;
}

注意事项

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