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+ | 任何 | 任何 |
首先,感谢您发布和分享您的知识,没有它我无法工作!
我今天第一次使用 :only-of-type,它适用于 span、p、img,但不适用于 div,是这样吗?