css伪类

css2的四个伪类

:link 未访问的链接

:visited 已访问的链接

:hover 鼠标悬停链接

:active 点击中的链接

    <style>
        /* 未访问的链接 */
        a:link {
            color: #FF0000;
        }

        /* 已访问的链接 */
        a:visited {
            color: #00FF00;
        }

        /* 鼠标悬停链接 */
        a:hover {
            color: #FF00FF;
        }

        /* 已选择的链接 */
        a:active {
            color: #0000FF;
        }
    </style>
    <div id="box1">
        <a href="#">我是超链接</a>
    </div>

注意: 这四个伪类必须按照 :link，:visited，:hover ，:active的顺序书写才会生效。这里介绍一个记忆小技巧："爱恨法则"即 “love hate”。

css3新增伪类

:empty 选择空标签

    <style>
        div:empty{
            width: 200px;
            height: 200px;
            background: #f00;
        }
    </style>
    <div>文字1</div>
    <div>文字2</div>
    <div></div>

:focus 选择当前获得焦点的表单元素

下面的代码中哪个表单元素获得焦点就会被选中

    <style>
        input:focus{
            width: 100px;
            height: 100px;
            background: #f00;
        }
    </style>
    <input type="text"><input type="text">

:enabled 选择当前有效的表单元素

下面的代码中第二个input有disabled属性，所以只有第一个表单元素会被选中

    <style>
        input:enabled{
            width: 100px;
            height: 100px;
            background: #f00;
        }
    </style>
    <input type="text"><input type="text" disabled>

:disabled 选择当前无效的表单元素

    <style>
        input:disabled{
            width: 100px;
            height: 100px;
            background: #f00;
        }
    </style>
    <input type="text"><input type="text" disabled>

:checked 选择当前已经勾选的单选按钮或者复选框

    <style>
        input:checked{
            width: 100px;
            height: 100px;
            background: #f00;
        }
    </style>
    <input type="radio" name="gender">
    <input type="radio" name="gender">
    <input type="checkbox" name="hobby">
    <input type="checkbox" name="hobby">
    <input type="checkbox" name="hobby">

:root 选择根元素，即标签