选择前 5 个子 CSS

在编写 CSS 样式表时，我们经常需要定位某个 HTML 元素的子元素，从而对其进行样式修改。这时我们就需要使用子选择器（Child Selector）。

子选择器指的是选择某个元素的子元素，它允许我们通过一个父元素和它的子元素之间的关系来选择元素。在 CSS 中，子选择器使用 ">" 符号来表示。

以下是如何使用子选择器选择前 5 个子元素的示例代码：

parent > child:nth-of-type(-n+5) {
  /* 样式代码 */
}

此代码选择符将选中 parent 元素下的前 5 个 child 元素，并对其应用给定的样式。其中，nth-of-type() 函数允许我们选择特定类型的子元素（如 p、div 等），而 -n+5 表示选择前五个子元素。

以下是完整的样式示例代码：

.parent > .child:nth-of-type(-n+5) {
  font-size: 16px;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

以上代码将选择 parent 元素下的前 5 个 child 元素，并将它们的字体大小设置为 16px，颜色设置为 #333，背景颜色设置为 #fff，边框设置为 1px 实线 #ccc，内边距设置为 10px。

使用子选择器可以方便地控制父元素下的特定子元素，是 CSS 样式表中常用的一种选择器。