CSS | :first-of-type 选择器

CSS的:first-of-type选择器用于选择元素的第一个指定类型子元素，例如：

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>

如果我们要选中第一个li元素，就可以使用:first-of-type选择器：

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

这将会把第一个li元素的颜色设置为红色。

用法

:first-of-type选择器可以用于各种不同的元素，例如：

选中第一个段落元素

p:first-of-type {
  font-size: 20px;
}

选中第一个表格行元素

tr:first-of-type {
  background-color: #ccc;
}

注意事项

• 如果一个元素不是指定类型的第一个子元素，那么它将不会被选中。
• 如果一个元素没有任何子元素符合指定的类型，那么它也将不会被选中。

浏览器支持

:first-of-type选择器被大多数主流浏览器所支持，包括：

• Chrome
• Firefox
• Safari
• IE9+
• Edge

总结

CSS的:first-of-type选择器是一个非常有用的工具，可以帮助我们更细致地选中页面上的元素。但需要注意的是，它只能选中第一个符合条件的子元素，如果要选中其他位置的元素，可以使用:nth-of-type选择器。