利用 :only-of-type 伪类可以精准选中父元素下唯一子元素的段落，并为其应用特殊样式。只需在 css 选择器中组合使用 p:only-of-type，即可让该段落自动获得背景色、边框或字体变化，无需添加额外的 class 属性。

如何区分唯一段落与多个段落中的首个元素？

:only-of-type 仅当父容器内存在且仅存在一个指定类型的子元素时生效，而 :first-child 关注的是位置。如果父元素中有两个 <p></p>，:only-of-type 将不会匹配任何元素，从而避免误伤。

.container p:only-of-type {
    background-color: #f0f8ff;
    border-left: 4px solid #007bff;
    padding: 10px;
}

上述代码定义了基础样式。假设 HTML 结构如下：

立即学习“前端免费学习笔记（深入）”；

<div class="container">
    <p>这是唯一的段落</p>
</div>

此时，该段落会显示蓝色背景和左边框。若增加另一个段落，样式将失效。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

如何处理嵌套结构中唯一段落的样式继承问题？

在嵌套结构中，:only-of-type 的作用域仅限于其直接父级。这意味着内部容器的唯一性判断独立于外部容器，不会受到外层其他同级元素的影响。

<section>
    <div class="inner">
        <p>内部唯一段落</p>
    </div>
    <p>外部普通段落</p>
</section>

在此结构中，.inner 内的 <p></p> 是其父级 <div> 的唯一子元素，因此 <code>p:only-of-type 会选中它。而外部的 <p></p> 不是 <section></section> 的唯一子元素（因为还有 <div>），所以不会被选中。这种局部作用域特性使得在处理复杂布局时更加灵活和安全。</div>