二、CSS3伪类

之前只有 a 标签具有合法伪类：

a:link a:visited a:hover a:active

2.1 任何标签都可以书写hover伪类

2.2 表单元素伪类

2.2.1 :focus 表单获取焦点伪类

/* 获取焦点伪类 :hover */
    input:hover {
        /* 去掉默认表单边框 */
        outline: none;
        /* 自己单独添加边框 */
        border: 5px solid #000;
    }

<form action="">
    <p>
        搜索框：<input type="search" placeholder="占位符">
    </p>
    <p>
        电子邮箱：<input type="email">
    </p>
</form>

2.2.2 :disabled 不可用表单伪类

:disabled 不可用表单伪类

:enabled 可用表单伪类

表单可以设置一个属性disabled（不可用表单），所有表单默认都是可用表单。

可用和不可用表单伪类都是直接渲染在浏览器上

不可用表单属性（不能输入）

<p>
    电话：<input type="tel" disabled>
</p>

/* :disabled 不可用表单伪类 */
        input:disabled {
            outline: none;
            border: 5px solid red;
        }

input:enabled {
            border: 5px solid green;
        }

2.2.3 :checked 表单被选中伪类

input[type="radio"]:checked + span {
    color:red;
    font-weight: bold;
}

<label>
    <input type="radio" name="sex" checked><span>女</span>
</label>
<label>
    <input type="radio" name="sex"><span>男</span>
</label>

2.3 节点伪类

2.3.1 :only-child

:only-child 选中元素必须是某个元素唯一的一个儿子节点伪类

/* 选中元素 li 必须是 ul 唯一的一个儿子 */
li:only-child {
    color: red;
    font-weight: bold;
}

2.3.2 :empty

:empty 空节点伪类 （标签内没有任何内容 空格、缩进、换行等也算内容）

div {
        width: 100px;
        height: 100px;
        background-color: #eee;
        margin-bottom: 10px;
    }
    div:empty {
        background-color: red;
    }

<div></div>
<div>空</div>
<div>         </div>
<div>                           </div>
<div>


</div>
<div>
    <span></span>
</div>