19.4.4 伪类选择器：E:checked、E:default和E:indeterminate
E:checked伪类选择器用来指定当表单中的radio单选框或checkbox复选框处于选取状态时的样式。
代码清单19-21为一个E:checked伪类选择器的使用示例，在该示例中使用了几个checkbox复选框，复选框在非选取状态时边框默认为黑色，当复选框处于选取状态时通过E:checked伪类选择器让选取框的边框变为蓝色。
代码清单19-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>
这段代码的运行结果如图19-31所示。
E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是，即使用户将该单选框或复选框控件的选取状态设定为非选取状态，E:default选择器中指定的样式仍然有效。
代码清单19-22为一个E:default选择器的使用示例，该示例中有几个复选框，第一个复选框被设定为默认打开时为选取状态，使用E:default选择器设定该复选框的边框为蓝色。
代码清单19-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>
这段代码的运行结果如图19-32所示。
需要注意的是，即使用户将默认设定为选取状态的单选框或复选框修改为非选取状态，使用default选择器设定的样式依然有效，如图19-33所示。
E:indeterminate伪类选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选取状态时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定。到目前为止，只有Opera浏览器对这个选择器提供支持。
代码清单19-23为一个E:indeterminate选择器的使用示例，该示例中有一组单选框，其中任何一个单选框都没有被设定为默认选取状态，使用E:indeterminate选择器来设定页面打开时该组单选框的边框为蓝色。
代码清单19-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>
这段代码所示示例在页面打开时的页面显示如图19-34所示。
用户只要选取其中任何一个单选框，使用E:indeterminate选择器指定的样式就被取消指定，如图19-35所示。
相关HTML 5与CSS 3权威指南：E:checked、E:default和E:indetermina