:first-of-type | CSS属性参考

共计 1154 个字符，预计需要花费 3 分钟才能阅读完成。

CSS :first-of-type伪类选择器用于匹配元素的所有子元素类型中第一个出现的子元素。

换句话来说。:first-of-type伪类选择器匹配父元素中第一次出现的某类子元素的第一个元素，例如：

<article>
  <h1> 标题 </h1>
  <p>
    第一个段落...
  </p>
  <p>
    第二个段落...
  </p>
</article>

如果使用下面的 CSS 规则来添加样式，那么第一个段落的文字大小将被修改：

p:first-of-type {font-size: 2em;}

示例代码

假如你有一段这样的 HTML 代码：

<div class="container">
    <h1> 标题 </h1>
    <nav>
        <ul>
            <li> 列表项一 </li>
            <li> 列表项二 </li>
            <li> 列表项三 </li>
            <li> 列表项四 </li>
        </ul>
    </nav>
    <article>
        <h2> 标题 </h2>
        <p>
            段落内容... <a href="#"> 超链接 1 </a>... <a href="#"> 超链接 2 </a>
        </p>
        <p>
            段落内容...
        </p>
    </article>

    <article>
        <h2> 标题 </h2>
        <p>
            段落内容...
        </p>
        <p>
            段落内容...
        </p>
    </article>
</div>

下面的代码会匹配 .container 容器中的第一个 article 元素。

article:first-of-type {
    background-color: #eee;
    border: 1px solid #ddd;
}

下面的代码会匹配所有 article 元素的第一个 p 段落。

p:first-of-type {font-weight: bold;}

下面的代码不会匹配任何的 p 段落。

p:first-child {font-style: italic;}

下面的代码通过 ::after 伪元素来为第一个超链接元素设置样式。

a:first-of-type {color: deepPink;}

a:first-of-type::after {content: "(" attr(href) ")";
    color: deepPink;
}

在线演示

下面的例子是上面代码的实际效果。

标题

标题

第一个段落内容被设置为粗体字 … 超链接 1 … 超链接 2

段落内容 …

标题

第一个段落内容被设置为粗体字 …

段落内容 …

浏览器支持

所有的现代浏览器都支持 :first-of-type 伪类选择器，包括：Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 9+ 以及 Android 和 iOS。

相关阅读

• CSS Selectors Level 3
• MDN :first-of-type
• :first-child | CSS 属性参考
• :last-child | CSS 属性参考
• :last-of-type | CSS 属性参考