答案：使用 :only-of-type 伪类可为父元素中唯一类型的子元素设置样式，如唯一段落变红；与 :only-child 不同，它仅关注特定类型元素的唯一性，常用于内容排版、表单设计等场景，兼容性方面建议用 JavaScript 检测并添加 class 以支持旧浏览器。
HTML设置唯一子类型样式，简单来说，就是让某个特定类型的元素，如果它在父元素中是唯一的，就应用特定的样式。
only-of-type伪类就是干这个的。
解决方案： 使用
:only-of-type伪类。这个伪类会选择父元素中唯一的特定类型的子元素。
举个例子，假设你有一个
<div>里面只有一个
<p>元素，你想让这个唯一的
<p>元素显示为红色。你可以这样写：
<!DOCTYPE html>
<html>
<head>
<style>
div > p:only-of-type {
color: red;
}
</style>
</head>
<body>
<div>
<p>This is the only paragraph.</p>
</div>
<div>
<p>This is one paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>在这个例子中，第一个
<div>里的
<p>会显示为红色，而第二个
<div>里的两个
<p>不会。因为只有第一个
<div>里的
<p>是唯一的。
:only-of-type伪类与
:only-child的区别？
立即学习“前端免费学习笔记（深入）”；
:only-child选择器选择的是父元素中唯一的子元素，不考虑元素类型。而
:only-of-type选择器选择的是父元素中唯一的指定类型的子元素。
比如：
<div> <p>This is the only paragraph.</p> </div> <div> <p>This is one paragraph.</p> <span>This is a span.</span> </div>
如果使用
div > p:only-child，那么第一个
<div>里的
<p>会被选中，因为它是
<div>中唯一的子元素。而第二个
<div>里的
<p>不会被选中，因为
<div>中还有
<span>元素。
但如果使用
div > p:only-of-type，那么只有第一个
<div>里的
<p>会被选中，因为它是
<div>中唯一的
<p>元素。
:only-of-type的实际应用场景有哪些？
实际应用场景挺多的，比如：
- 内容排版：在一些内容管理系统中，如果某个区块只有一个图片，可以给这个唯一的图片添加特殊边框或阴影。
- 表单设计：如果某个表单项只有一个输入框，可以调整这个输入框的宽度或样式。
- 导航菜单：如果某个导航菜单只有一个链接，可以隐藏这个链接或改变其显示方式。
- 卡片布局：如果卡片中只有一个特定类型的元素，比如只有一个标题，可以调整标题的字体大小或颜色。
总的来说，
:only-of-type在需要根据元素在父元素中的唯一性来应用样式时非常有用。
如何处理
:only-of-type在旧浏览器中的兼容性问题？
:only-of-type伪类在 IE9+ 及其他现代浏览器中都支持，但在更老的浏览器中可能不兼容。如果需要兼容旧浏览器，有几种方法：
-
JavaScript 解决方案：使用 JavaScript 来检测元素是否是唯一的特定类型子元素，然后添加相应的 class。
const parents = document.querySelectorAll('div'); // 选择所有 div 元素 parents.forEach(parent => { const paragraphs = parent.querySelectorAll('p'); // 选择 div 中的所有 p 元素 if (paragraphs.length === 1) { paragraphs[0].classList.add('only-paragraph'); // 添加 class } });然后在 CSS 中定义
.only-paragraph
的样式：.only-paragraph { color: red; } CSS Hack：针对特定旧浏览器使用 CSS Hack，但这通常不推荐，因为 CSS Hack 会使代码难以维护。
Polyfill：虽然很少见，但你可以尝试寻找
:only-of-type
的 Polyfill。Polyfill 是一种代码，可以在旧浏览器中模拟实现新的 API。
通常来说，使用 JavaScript 解决方案是最可靠和推荐的方法。
