:only-of-type

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。开始使用200 美元的免费积分!

在 CSS 中,:only-of-type 伪类选择器 表示任何没有同类型兄弟元素的元素。

p:only-of-type {
  color: red;
}

如果选择器前面没有标签,它将匹配任何标签(例如 :only-of-type)。如果另一个选择器位于其前面,则它将根据该选择器匹配的标签类型进行匹配。例如,如果 .example 应用于段落元素,则 .example:only-of-type 的行为将类似于 p:only-of-type

简单示例

一个列表仅包含一个列表项。另一个列表包含三个列表项。我们可以使用 :only-of-type 作为目标来选择单独的列表项。

Check out this Pen!

虽然这可能不是最好的例子,因为 :only-child 在那里也能正常工作,因为列表项是列表的唯一可能子元素。如果我们改用 div,我们可以在一个 div 中定位一个段落,如果它是唯一的段落,尽管还有其他元素也在其中。

Check out this Pen!

需要注意的是

作为一个有趣的补充,你可以使用 :first-of-type:last-of-type:nth-of-type(1):nth-last-of-type(1) 来实现与 :only-of-type 相同的选择。但是,这些方法使用了两个链式选择器,这意味着它们的特殊性是 :only-of-type 的两倍。

相关属性

其他资源

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
任何 任何 任何 任何 IE9+ 任何 任何