:only-child

概述

CSS伪类:only-child代表了属于某个父元素的唯一一个子元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点.

语法

parent child:only-child {
  property: value;
} 

示例

一个基础示例

span:only-child {
  color: red;
}

<div>
    <span>This span is the only child of its father</span>
</div>

<div>
    <span>This span is one of the two children of its father</span>
    <span>This span is one of the two children of its father</span>
</div> 

演示结果

一个列表示例

li li {
  list-style-type: disc;
}
li:only-child {
  color: #6699ff;
  font-style: italic;
  list-style-type: square;
}

<ol>
    <li>First
        <ul>
            <li>This is only child element
        </ul>
    </li>
    <li>Second
        <ul>
            <li>This list has two elements
            <li>This list has two elements
        </ul>
    </li>
    <li>Third
        <ul>
            <li>This list has three elements
            <li>This list has three elements
            <li>This list has three elements
        </ul>
    </li>
<ol>

p:only-child {
    background: #6699ff;
    width: 350px;
}

<div>
    <p>This is a paragraph with :only-child</p>
</div>

规范

浏览器兼容性