CSS3每日一练之选择器-状态伪类选择器[四]

CSS3教程手机阅读

前三节我们学习了form元素的状态伪类选择器，今天我们再来学习一下复选框和单选框的选择器，以下选择器Opera支持最好！
:default选择器、:checked选择器和:indeterminate选择器
:default状态伪类选择器用来指定当前元素处于选取状态的单选框或复选框的样式；
:checked状态伪类选择器用来指当前元素处于非选取状态的单选框或复选框状态的样式；
:indeterminate状态伪类选择器用来指定当页面打开时，某组中的单选框或复选框元素还没有选取状态的时样式；

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-状态伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
body{margin-bottom:20px; font-size:14px;}
#content{margin:30px auto; padding:10px; width:300px; overflow:hidden;}
label{display:inline; margin-bottom:5px; width:150px; height:25px; line-height:25px; float:left;}
input[type=checkbox]:default{border:2px #00f solid;}
input[type=checkbox]:checked{border:2px #f00 solid;}
input[type=radio]:indeterminate{border:2px #0ff solid;}
</style>
</head>
<body>
<div id="content">
<label for="checkbox1"><input id="checkbox1" name="web" type="checkbox" checked/>前端</label>
<label for="checkbox2"><input id="checkbox2" name="web" type="checkbox"/>前端开发</label>
<label for="checkbox3"><input id="checkbox3" name="web" type="checkbox"/>web前端开发</label>
<label for="checkbox4"><input id="checkbox4" name="web" type="checkbox"/>前端开发网</label>
<label for="checkbox5"><input id="checkbox5" name="web" type="checkbox"/>W3Cfuns</label>
<label for="radio1"><input id="radio1" name="web" type="radio"/>男</label>
<label for="radio2"><input id="radio2" name="web" type="radio"/>女</label>
</div>
</body>
</html>