菜鸟教程解释:(: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中没有向前选择器。
菜鸟爬行中…