CSS选择符-----伪类选择符

Element:hover

E:hover { sRules } 设置元素在其鼠标悬停时的样式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h1 {
                font-size: 16px;
            }
            
            a,
            div {
                display: block;
                margin-top: 10px;
                padding: 10px;
                border: 1px solid #ddd;
            }
            
            a:hover {
                display: block;
                background: #ddd;
                color: #f00;
            }
            
            div:hover {
                background: #ddd;
                color: #f00;
            }
        </style>
    </head>

    <body>
        <h1>请将鼠标分别移动到下面2个元素上</h1>
        <a href="?">我是一个a</a>
        <div>我是一个div</div>
    </body>

</html>

Element:focus

E:focus { sRules } 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式，webkit内核浏览器会默认给:focus状态的元素加上outline的样式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h1 {
                font-size: 16px;
            }
            
            ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            
            input:focus {
                background: #f6f6f6;
                color: #f60;
                border: 1px solid #f60;
                outline: none;
            }
        </style>
    </head>

    <body>
        <h1>请聚焦到以下输入框</h1>
        <form action="#">
            <ul>
                <li><input value="姓名" /></li>
                <li><input value="单位" /></li>
                <li><input value="年龄" /></li>
                <li><input value="职业" /></li>
            </ul>
        </form>
    </body>

</html>

Element:checked

E:checked { sRules } 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            input:checked+span {
                background: #f00;
            }
            
            input:checked+span:after {
                content: " 我被选中了";
            }
        </style>
    </head>

    <body>
        <form method="post" action="#">
            <fieldset>
                <legend>选中下面的项试试</legend>
                <ul>
                    <li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
                    <li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
                    <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
                </ul>
            </fieldset>
            <fieldset>
                <legend>选中下面的项试试</legend>
                <ul>
                    <li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
                    <li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
                    <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
                </ul>
            </fieldset>
        </form>
    </body>

</html>

Element:enabled和Element:disabled

E:enabled { sRules } 匹配用户界面上处于可用状态的元素E

E:disabled { sRules } 匹配用户界面上处于禁用状态的元素E

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            li {
                padding: 3px;
            }
            
            input[type="text"]:enabled {
                border: 1px solid #090;
                background: #fff;
                color: #000;
            }
            
            input[type="text"]:disabled {
                border: 1px solid #ccc;
                background: #eee;
                color: #ccc;
            }
        </style>
    </head>

    <body>
        <form method="post" action="#">
            <fieldset>
                <legend>E:enabled与E:disabled</legend>
                <ul>
                    <li><input type="text" value="可用状态" /></li>
                    <li><input type="text" value="可用状态" /></li>
                    <li><input type="text" value="禁用状态" disabled="disabled" /></li>
                    <li><input type="text" value="禁用状态" disabled="disabled" /></li>
                </ul>
            </fieldset>
        </form>
    </body>

</html>

CSS选择符-----伪类选择符

Element:hover

Element:focus

Element:checked

Element:enabled和Element:disabled

猜你喜欢