伪类选择器：checked

在这里插入图片描述
由上图菜鸟教程定义可知：checked伪类仅仅适用于单选按钮或则复选框，所以如果在其他类型的元素定义checked伪类，checked会失效。具体用法参考下列代码：

<!DOCTYPE html>          
<html>          
<head>          
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maximun-scale=1.0" />
    <title>伪类选择器:checked</title>        
    <style type="text/css">  

        span{color: red;}

	    label{border: 2px solid black;}
		
		.input1:checked+.checkbox1{border: 2px dashed blue;background-color: brown;}
		.checkbox1{border: 2px dashed red;background-color: bisque;}
    </style>        
</head>          
<body>  
<p>首先<span>伪类选择器:checked</span>适用于<span>input type="checkbox"</span>,<span>input type="radio"</span></p>
<p>应用于checkbox复选框</p>
 <label>
	 <input class="input1" type="checkbox" checked="checked"/>
	 <span class="checkbox1">ksghkajhsgapiuslghrsglkjhdir</span>
 </label><br />
 
 <p>应用于radio单选框</p>
  <label>
 	 <input class="input1" type="radio" name="radio" />
 	 <span class="checkbox1">ksghkajhsgapiuslghrsglkjhdir</span>
  </label><br />
  
  <label>
  	<input class="" type="radio" name="radio" checked="checked"/>
  	<span class="">ksghkajhsgapiuslghrsglkjhdir</span>
  </label>
    
</body>          
</html>

关于其用法，注意小点：
1，在为类选择器选择的时候，使用原始的input：checked+class/label（每当选中时，改变其后class/label中的内容样式）
2，经验之谈：在使用radio or checkbox 时，父类最好使用<label>标签，这样可以使点击<span>内容时格改变checkbox or radio 的状态，增强用户交互感。
关于radio使用：
1，每个<input type="radio"/>如果没有写name="?"则会默认的给每个input设定不同的name事件名，这样就表面的打破了其单选的意义，所以，在用时，一定要给其事件命名，且名称相同。
2，单选~顾名思义就是必须要有一个选中，一旦你已选就必须存在一个已被选中，所以再次点击已选中按钮，按钮不会取消选中，除非点击另一按钮将其替换

运行截图：
在这里插入图片描述

伪类选择器：checked

猜你喜欢