仅第一个元素的 CSS 样式 - CSS

有时候我们希望仅对第一个元素应用 CSS 样式，这时候可以使用 :first-child 伪类或者 :first-of-type 伪类。

:first-child

:first-child 伪类可以选中指定元素的父元素下的第一个子元素。例如下面的 HTML 代码：

<ul>
  <li>Hello world!</li>
  <li>Only first child</li>
  <li>Other child</li>
</ul>

我们可以使用 :first-child 伪类来选中这个列表的第一个子元素并应用样式：

ul li:first-child {
  color: red;
}

这会使得列表中的第一个子元素变成红色。

:first-of-type

:first-of-type 伪类可以选中指定元素下的第一种指定类型的子元素。例如下面的 HTML 代码：

<ul>
  <li>Hello world!</li>
  <li>First of type</li>
  <li>Other child</li>
  <li>First of type</li>
</ul>

我们可以使用 :first-of-type 伪类来选中这个列表中的第一种子元素并应用样式：

ul li:first-of-type {
  color: red;
}

这会使得列表中的第一个和第二个子元素变成红色，因为它们都是这个列表的第一种子元素。

以上就是仅对第一个元素应用 CSS 样式的两种方法。需要注意的是这两种方法只适用于块级元素和部分内联元素，不适用于内联元素。