focus;invalid 用法-----浅析

菜鸟教程解释：（:focus选择器用于选择具有焦点的元素。提示: :focus选择器接受键盘事件或其他用户输入的元素;
:invalid 选择器用于在表单元素中的值是非法时设置指定样式。）
总的来说：focus是个当被选元素获取到焦点时（一般就是鼠标点击），触发其内部样式，focus和invalid一般应用于表单。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maxinum-scale=1.0" />
		<title>focus</title>
		<style>
			
			*{
				margin: 0px;
				padding: 0px;
			}
			
			.demo{
				width: 25%;
				margin: 100px auto;
				padding: 5px;
				border: 2px solid darkgray;
				border-radius: 10px;
			}
			
			.drag{
				position: absolute;
				margin: 2% 0 0 -22%;
				width: 0px;
				height: 0px;
				border-style: solid;
				border-width: 2px 6px;
				border-color: #A9A9A9;
				transform: rotateZ(45deg);
				display: inline-block;
			}
			
			.drag::before{
				width: 15px;
				height: 15px;
				margin: -10px 0 0 -26px ;
				border: 3px solid #A9A9A9;
				border-radius: 100%;
				content: "";
				display: block;
				opacity: 1.0;
				z-index: 99;
			}
			
			.span{
				margin: 0 0 0 -25%;
				padding: 8px 15px;
				background-color: darkslategrey;
				color: white;
				font-size: large;
			}
			
			input{
				padding: 4% 25% 4% 13%;
				font-size: large;
				background-color: transparent;
				border: none;
			}
			
			input:focus + .drag::before{
				border-color: #505050;
			}
			
			input:focus + .drag{
				border-color: #505050;
			}
			
			input:focus ~ .span{
				background-color: #A22926;
			}
			
		</style>
	</head>
	<body>
		<div class="demo">
			   <input />
			   <span class="drag"></span>
			   <span class="span">SEARCH</span>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>
备注：本人还未做响应式，所以请在分辨率为1365*480下查看

运行截图：
在这里插入图片描述
invaild类同，我就不多加累述了。

感悟：理解到了focus伪类选择器，以及如何选用css选择器的重要性（“+”，“~”等等不同），注意在css中没有向前选择器。

菜鸟爬行中…

focus;invalid 用法-----浅析

猜你喜欢