16.4 UI元素状态伪类选择器
在CSS 3的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器。
这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。
在CSS 3中，共有17种UI元素状态伪类选择器，分别是E：hover、E：active、E：focus、E：enabled、E：disabled、E：read-only、E：read-write、E：checked、E：default、E：indeterminate、E：：selection、E：invalid、E：valid、E：required、E：optional、E：in-range及out-of-range。
到目前为止，这17种选择器被浏览器的支持情况如表16-1所示。
表16-1 各UI元素状态伪类选择器受浏览器的支持情况
16.4.1 伪类选择器E：hover、E：active和E：focus
E：hover伪类选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式，使用方法如下所示：
<元素>:hover{
// 指定样式
}
可以在“<元素>”中添加元素的type属性，使用方法类似如下：
input[type="text"]: hover{
// 指定的样式
}
另外，所有UI元素状态伪类选择器的使用方法均与此类似，故后面不再赘述。
·E：active伪类选择器被用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式。
·E：focus伪类选择器被用来指定元素获得光标焦点时使用的样式，主要在文本框控件获得焦点并进行文字输入时使用。
代码清单16-18是使用了这3个选择器的综合示例，该示例中有两个文本框控件，使用这3个伪类选择器来指定当鼠标指针移动到文本框控件上时、文本框控件被激活时，以及光标焦点落在文本框之内时的样式。
代码清单16-18 伪类选择器E：hover、E：active和E：focus的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>E:hover选择器、E:active选择器与E:focus选择器使用示例</title>
</head>
<style type="text/css">
input[type="text"]:hover{
background-color: greenyellow;
}
input[type="text"]:focus{
background-color: skyblue;
}
input[type="text"]:active{
background-color: yellow;
}
</style>
<body>
<form>
<p>姓名：<input type="text" name="name" /></p>
<p>地址：<input type="text" name="address" /></p>
</form>
</body>
</html>
对于示例中的任意一个文本框控件来说，这段代码的运行结果都可能有如下4种情况：
1）没有对文本框控件进行任何操作时的页面显示如图16-24所示（文本框背景色为白色）。
2）鼠标指针移动到某一个文本框控件上时的页面显示如图16-25所示（文本框背景色为绿色）。
图16-24 代码清单16-18的运行结果（没有对文本框控件进行任何操作时）
图16-25 代码清单16-18的运行结果（鼠标指针移动到姓名文本框控件上时）
3）文本框控件被激活时的页面显示如图16-26所示（文本框背景色为黄色）。
4）文本框控件获得光标焦点后的页面显示如图16-27所示（文本框背景色为浅蓝色）。
图16-26 代码清单16-18的运行结果（姓名文本框控件被激活时）
图16-27 代码清单16-18的运行结果（姓名文本框控件获得光标焦点时）
16.4.2 伪类选择器E：enabled与E：disabled
·E：enabled伪类选择器用来指定当元素处于可用状态时的样式。
·E：disabled伪类选择器用来指定当元素处于不可用状态时的样式。
当一个表单中的元素经常在可用状态与不可用状态之间进行切换时，通常会将E：disabled伪类选择器与E：enabled伪类选择器结合使用，用E：disabled伪类选择器来设置该元素处于不可用状态时的样式，用E：enabled伪类选择器来设置该元素处于可用状态时的样式。
代码清单16-19中给出了一个将E：disabled伪类选择器与E：enabled伪类选择器结合使用的示例，在该示例中有两个radio单选框与一个文本框，在JavaScript脚本中编写代码，当用户选中其中一个radio单选框时，文本框变为可用状态，选中另一个radio单选框时，文本框变为不可用状态。通过结合使用E：disabled伪类选择器与E：enabled伪类选择器，让文本框处于不同的状态时分别使用不同的样式。
代码清单16-19 E：disabled伪类选择器与E：enabled伪类选择器结合使用的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>E: disabled伪类选择器与E:enabled伪类选择器结合使用示例</title>
<script>
function radio_onchange()
{
var radio=document.getElementById("radio1");
var text=document.getElementById("text1");
if(radio.checked)
text.disabled="";
else
{
text.value="";
text.disabled="disabled";
}
}
</script>
<style>
input[type="text"]:enabled{
background-color:yellow;
}
input[type="text"]:disabled{
background-color:purple;
}
</style>
</head>
<body>
<form>
<input type="radio" id="radio1" name="radio"
onchange="radio_onchange();">可用</radio>
<input type="radio" id="radio2" name="radio"
onchange="radio_onchange();">不可用</radio><br/>
<input type=text id="text1" disabled />
</form>
</body>
</html>
这段代码的运行结果可分为如下两种情况：
·文本框处于可用状态时的页面显示如图16-28所示（背景色为黄色）。
·文本框处于不可用状态时的页面显示如图16-29所示。
图16-28 代码清单16-19的运行结果（文本框处于可用状态时）
图16-29 代码清单16-19的运行结果（文本框处于不可用状态时）
16.4.3 伪类选择器E：read-only与E：read-write
·E：read-only伪类选择器用来指定当元素处于只读状态时的样式。
·E：read-write伪类选择器用来指定当元素处于非只读状态时的样式。
在Firefox浏览器中，需要写成“-moz-read-only”或“-moz-read-write”的形式。
代码清单16-20为E：read-only选择器与E：read-write选择器结合使用的一个示例，在该示例中有一个姓名文本框控件和一个地址文本框控件。其中姓名文本框控件不是只读控件，使用E：read-write选择器定义样式；地址文本框控件是只读控件，使用E：read-only选择器定义样式。
代码清单16-20 E：read-only伪类选择器与E：read-write伪类选择器结合使用的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title> E: read-only伪类选择器与E:read-write伪类选择器结合使用示例
</title>
<style type="text/css">
input[type="text"]:read-only{
background-color: gray;
}
input[type="text"]:read-write{
background-color: greenyellow;
}
input[type="text"]:-moz-read-only{
background-color: gray;
}
input[type="text"]:-moz-read-write{
background-color: greenyellow;
}
</style>
</head>
<body>
<form>
<p>名前：<input type="text" name="name" />
<p>地址：<input type="text" name="address" value="江苏省常州市"
readonly="readonly" />
</p>
</form>
</body>
</html>
这段代码的运行结果如图16-30所示。
16.4.4 伪类选择器E：checked、E：default和E：indeterminate
E：checked伪类选择器用来指定当表单中的radio单选框或checkbox复选框处于选取状态时的样式。
代码清单16-21为一个E：checked伪类选择器的使用示例，在该示例中使用了几个checkbox复选框，复选框在非选取状态时边框默认为黑色，当复选框处于选取状态时通过E：checked伪类选择器让选取框的边框变为蓝色。
代码清单16-21 E：checked伪类选择器的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>E:checked伪类选择器使用示例</title>
<style type="text/css">
input[type="checkbox"]:checked {
outline:2px solid blue;
}
</style>
</head>
<body>
<form>
兴趣:<input type="checkbox">阅读</input>
<input type="checkbox">旅游</input>
<input type="checkbox">看电影</input>
<input type="checkbox">上网</input>
</form>
</body>
</html>
这段代码的运行结果如图16-31所示。
图16-30 E：read-only伪类选择器与E：read-write伪类选择器结合使用的示例
图16-31 E：checked伪类选择器使用示例
E：default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是，即使用户将该单选框或复选框控件的选取状态设定为非选取状态，E：default选择器中指定的样式仍然有效。
代码清单16-22为一个E：default选择器的使用示例，该示例中有几个复选框，第一个复选框被设定为默认打开时为选取状态，使用E：default选择器设定该复选框的边框为蓝色。
代码清单16-22 E：default选择器的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>E:default选择器的使用示例</title>
<style type="text/css">
input[type="checkbox"]:default {
outline:2px solid blue;
}
</style>
</head>
<body>
<form>
兴趣:<input type="checkbox" checked>阅读</input>
<input type="checkbox">旅游</input>
<input type="checkbox">看电影</input>
<input type="checkbox">上网</input>
</form>
</body>
</html>
这段代码的运行结果如图16-32所示。
需要注意的是，即使用户将默认设定为选取状态的单选框或复选框修改为非选取状态，使用default选择器设定的样式依然有效，如图16-33所示。
图16-32 E：default选择器的使用示例
图16-33 复选框被修改为非选取状态后使用default选择器设定的样式依然有效
E：indeterminate伪类选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选取状态时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定。到目前为止，只有Opera浏览器对这个选择器提供支持。
代码清单16-23为一个E：indeterminate选择器的使用示例，该示例中有一组单选框，其中任何一个单选框都没有被设定为默认选取状态，使用E：indeterminate选择器来设定页面打开时该组单选框的边框为蓝色。
代码清单16-23 E：indeterminate选择器的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title> E:indeterminate选择器的使用示例</title>
<style type="text/css">
input[type="radio"]:indeterminate{
outline: solid 3px blue;
}
</style>
</head>
<body>
<form>
年龄：
<input type="radio" name="radio" value="male" />男
<input type="radio" name="radio" value="female" />女
</form>
</body>
</html>
这段代码所示示例在页面打开时的页面显示如图16-34所示。
用户只要选取其中任何一个单选框，使用E：indeterminate选择器指定的样式就被取消指定，如图16-35所示。
图16-34 E：indeterminate选择器的使用示例
图16-35 用户选取任何一个单选框后，使用E：inde-terminate选择器指定的样式就会被取消
16.4.5 伪类选择器E：：selection
E：：selection伪类选择器用来指定当元素处于选中状态时的样式。
代码清单16-24为一个E：：selection伪类选择器的使用示例，在该示例中分别给出了一个p元素，一个文本框控件以及一个表格。当p元素处于选中状态时，被选中文字变为红色；当文本框控件处于选中状态时，被选中文字变为灰色；当表格处于选中状态时，被选中文字变为绿色。
代码清单16-24 E：：selection伪类选择器使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>E::selection伪类选择器使用示例</title>
<style type="text/css">
p::selection{
background:red;
color:#FFF;
}
p::-moz-selection{
background:red;
color:#FFF;
}
input[type="text"]::selection{
background:gray;
color:#FFF;
}
input[type="text"]::-moz-selection{
background:gray;
color:#FFF;
}
td::selection{
background:green;
color:#FFF;
}
td::-moz-selection{
background:green;
color:#FFF;
}
</style>
</head>
<body>
<p>这是一段测试文字。</p>
<input type="text" value="这是一段测试文字。"/><p/>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>测试文字</td>
<td>测试文字</td>
</tr>
<tr>
<td>测试文字</td>
<td>测试文字</td>
</tr>
</body>
</html>
这段代码的运行结果如图16-36所示。
图16-36 E：：selection伪类选择器使用示例
16.4.6 伪类选择器E：invalid与E：valid
·E：invalid伪类选择器用来指定，当元素内容不能通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式（例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式）时的样式。
·E：valid伪类选择器用来指定，当元素内容通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式（例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式）时的样式。
代码清单16-25为一个E：invalid伪类选择器与E：valid伪类选择器的使用示例。示例页面中具有一个使用了required属性的input元素，当元素中没有被填入内容时元素背景色为红色，当元素中填入内容后元素背景色变为白色。
代码清单16-25 E：invalid伪类选择器与E：valid伪类选择器的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title> E:invalid伪类选择器与E:valid伪类选择器结合使用示例
</title>
<style type="text/css">
input[type="text"]:invalid{
background-color: red;
}
input[type="text"]:valid{
background-color: white;
}
</style>
</head>
<body>
<form>
<p>请输入任意文字：<input type="text" required/>
</p>
</form>
</body>
</html>
16.4.7 伪类选择器E：required与E：optional
·E：required伪类选择器用来指定允许使用required属性，且已经指定了required属性的input元素、select元素以及textarea元素的样式。
·E：optional伪类选择器用来指定允许使用required属性，且未指定required属性的input元素、select元素以及textarea元素的样式。
代码清单16-26为一个E：required伪类选择器与E：optional伪类选择器的使用示例。示例页面中具有两个分别用于输入姓名与住址的文本框，并且对用于输入姓名的文本框指定了required属性，不对用于输入住址的文本框指定required属性。同时通过E：required伪类选择器指定用于输入姓名的文本框边框为红色，宽度为3px，通过E：optional伪类选择器指定用于输入住址的文本框边框为黑色，宽度为1px。
代码清单16-26 E：required伪类选择器与E：optional伪类选择器的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title> E:required伪类选择器与E:optional伪类选择器结合使用示例</title>
<style type="text/css">
input[type="text"]:required{
border-color: red;
border-width:3px;
}
input[type="text"]:optional{
border-color: black;
border-width:1px;
}
</style>
</head>
<body>
<form>
姓名：<input type="text" required placeholder="必须输入姓名"/><br/>
住址：<input type="text"/>
</form>
</body>
</html>
16.4.8 伪类选择器E：in-range与E：out-of-range
·E：in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），且实际输入值在该范围内时使用的样式。
·E：out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），但实际输入值在该范围之外时使用的样式。
代码清单16-27为一个E：in-range伪类选择器与E：out-of-range伪类选择器的使用示例。示例页面中包含一个数值输入控件（type属性值为number的input元素），通过min属性值与max属性值限定元素内的有效输入数值为从1到100，通过E：in-range伪类选择器指定元素内的输入值在该范围内时元素背景色为白色，通过E：out-of-range伪类选择器指定元素内的输入值在该范围之外时元素背景色为红色。
代码清单16-27 E：in-range伪类选择器与E：out-of-range伪类选择器的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>E:in-range伪类选择器与E:out-of-range伪类选择器结合使用示例</title>
<style type="text/css">
input[type="number"]:in-range{
background-color: white;
}
input[type="number"]:out-of-range{
background-color: red;
}
</style>
</head>
<body>
<form>
请输入1到100之内的数值：<input type=number min=0 max=100 >
</form>
</body>
</html>