selectorUI元素状态伪类

结合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>
a:link
{
    color:Green;
}
E:link
仅能在a对象上使用.用于设置a元素未被访问时的样式.
对于无href的a对象无效.
a:visited
{
    background-color:Silver;
}
E:visited
仅能在a对象上使用.用于设置a元素访问过后的样式.
对于无href的a对象无效.
p:hover
{
    color:red;
}
E:hover
设置鼠标在对象上悬停时的样式.
p:active
{
    color:Green;
}
E:active
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式.
input:focus
{
    background-color:Green;
}
E:focus
设置元素在成为输入焦点时的样式.
input:checked
{
    height:40px;
    width:40px;
}
E:checked
设置元素被选中时的样式.
input:enabled
{
    color:Red;
}
E:enabled
设置用户界面中处于可用状态的E元素
input:disabled
{
    color:Red;
}
E:disabled
设置用户界面中处于不可用的E元素
p::selection
{
    color:Red;
}
E::selection
匹配E元素中被用户选中或处于高亮状态的部分

代码	效果
<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>
a:link { color:Green; }	E:link 仅能在a对象上使用.用于设置a元素未被访问时的样式. 对于无href的a对象无效.
a:visited { background-color:Silver; }	E:visited 仅能在a对象上使用.用于设置a元素访问过后的样式. 对于无href的a对象无效.
p:hover { color:red; }	E:hover 设置鼠标在对象上悬停时的样式.
p:active { color:Green; }	E:active 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式.
input:focus { background-color:Green; }	E:focus 设置元素在成为输入焦点时的样式.
input:checked { height:40px; width:40px; }	E:checked 设置元素被选中时的样式.
input:enabled { color:Red; }	E:enabled 设置用户界面中处于可用状态的E元素
input:disabled { color:Red; }	E:disabled 设置用户界面中处于不可用的E元素
p::selection { color:Red; }	E::selection 匹配E元素中被用户选中或处于高亮状态的部分