<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>单选按钮6.3</title>
<style type="text/css">
.style1{ color:blue; font-weight:bold;} //Blue字的样式
.style2{ color:red; font-weight:bold;} //Red
.style3{ color:purple; font-weight:bold;} //Purple
</style>
</head>
<body>
<form name="buttons">
<h2>What color do you like ?</h2>
<!--为什么第一个style1被应用到Blue上面,Red和Purple没有被应用-->
<input type="radio" name="color" value="blue" id="blue">
<span class="style1">Blue</span></br>
<input type="radio" name="color" value="red" id="red">
<span class="style2">Red</span></br>
<input type="radio" name="color" value="yellow" id="purple">
<span class="style3">Purple</span>
</form>
</body>
</html>
去掉你那些所谓的"注释"。
.style1{ color:blue; font-weight:bold;}
.style2{ color:red; font-weight:bold;}
.style3{ color:purple; font-weight:bold;}