selector-UI元素状态伪类

结合CSS2.0和CSS3.0,UI元素状态伪类共有以下几个,仍然是结合实例来看.

代码             效果
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>无标题页</title>

    <style type="text/css">

        *

        {

            margin:5px;

        }

    </style>

</head>

<body>

    <a href="HTMLPage.htm">超级链接</a><br />

    <a>超级链接</a><br />

    <input type="checkbox" checked="checked" value="1" /><input type="checkbox" /><br />

    <input type="text" value="默认都是enabled" /><br />

    <input type="text" value="disabled" disabled="disabled" />

    <br />

    <p>选中部分会高亮</p>

</body>

</html>
image
a:link

{

    color:Green;

}
E:link
仅能在a对象上使用.用于设置a元素未被访问时的样式.
对于无href的a对象无效.
image
a:visited

{

    background-color:Silver;

}
E:visited
仅能在a对象上使用.用于设置a元素访问过后的样式.
对于无href的a对象无效.
image
p:hover

{

    color:red;

}
E:hover
设置鼠标在对象上悬停时的样式.
image
p:active

{

    color:Green;

}
E:active
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式.
image
input:focus

{

    background-color:Green;

}
E:focus
设置元素在成为输入焦点时的样式.
image
input:checked

{

    height:40px;

    width:40px;

}
E:checked
设置元素被选中时的样式.
image
input:enabled

{

    color:Red;

}
E:enabled
设置用户界面中处于可用状态的E元素
image
input:disabled

{

    color:Red;

}
E:disabled
设置用户界面中处于不可用的E元素
image
p::selection

{

    color:Red;

}
E::selection
匹配E元素中被用户选中或处于高亮状态的部分
image

你可能感兴趣的:(selector)