:only-child
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
:only-child CSS 伪类表示没有任何兄弟元素的元素。这与 :first-child:last-child 或 :nth-child(1):nth-last-child(1) 相同，但前者具有更小的权重性。
尝试一下
li:only-child { color: fuchsia; } b:only-child { text-decoration: underline; } <p>Stars expected to attend:</p> <ol> <li>Robert Downey, Jr.</li> </ol> <p>Stars yet to confirm:</p> <ol> <li>Scarlett Johansson</li> <li>Samuel L. Jackson</li> <li>Chris Pratt</li> </ol> <p>The ceremony is going to be held in <b>The Dolby Theatre</b>.</p> 备注：按照最初的定义，被选择的元素必须拥有一个父级元素。从选择器 Level 4 开始，这不再是必须的了。
语法
css
:only-child { /* ... */ } 示例
基础示例
HTML
html
<div> <div>我是唯一子元素。</div> </div> <div> <div>我是第一个兄弟元素。</div> <div>我是第二个兄弟元素。</div> <div> 我是第三个兄弟元素。 <div>但这又是唯一的子元素。</div> </div> </div> CSS
css
div:only-child { color: red; } div { display: inline-block; margin: 6px; outline: 1px solid; } 结果
一个列表示例
HTML
html
<ol> <li> 第一 <ul> <li>该列表仅有一个元素。</li> </ul> </li> <li> 第二 <ul> <li>该列表有三个元素。</li> <li>该列表有三个元素。</li> <li>该列表有三个元素。</li> </ul> </li> </ol> CSS
css
li li { list-style-type: disc; } li:only-child { color: red; list-style-type: square; } 结果
规范
| Specification |
|---|
| Selectors Level 4 # only-child-pseudo |
浏览器兼容性
Loading…