23. CSS3 :first-of-type选择器

:first-of-type选择器类似于:first-child选择器，不同之处就是指定了元素的类型，其主要用来定位一个父元素下的某个类型的第一个子元素。

示例演示

通过:first-of-type选择器，定位 div 容器中的第一个 p 元素（p 不一定是容器中的第一个子元素），并设置其背景色为橙色。

HTML 代码：

<div class="wrapper">
  <div>我是一个块元素，我是.wrapper 的第一个子元素</div>
  <p>我是一个段落元素，我是不是.wrapper 的第一个子元素，但是他的第一个段落元素</p>
  <p>我是一个段落元素</p>
  <div>我是一个块元素</div>
</div>

CSS 代码：

.wrapper {
  width: 500px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  color: #fff;
}
.wrapper > div {
  background: green;
}
.wrapper > p {
  background: blue;
}
/*我要改变第一个段落的背景为橙色*/
.wrapper > p:first-of-type {
  background: orange;
}

效果如下：

以上关于23. CSS3 :first-of-type选择器的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。