CSS伪类失去焦点

在CSS中，伪类是一种用来描述元素特定状态的选择器，其中失去焦点（:focus）伪类是描述元素在不再处于被选中状态时的情况。

&:focus{
/** 当元素被选中时的样式 **/
}
&:not(:focus){
/** 当元素失去焦点时的样式 **/
}

失去焦点伪类常常用在表单元素上，当用户在填写表单时，点击离开该表单元素时，它就会失去被选中的状态，这时候我们就可以使用失去焦点伪类来控制该元素的样式。

例如当我们需要红色警示用户填写表单时，如果用户点击该表单元素后它就变成了红色，用户填写正确后，再离开该表单元素时，元素变回原来的状态。

input {
border: 1px solid #ccc; 
}
input:focus {
border: 1px solid red;
}
input:not(:focus) {
border: 1px solid #ccc;
}

通过上面的CSS代码，当用户点击input元素时它就会变成红色边框，填写正确后，离开该元素时它就会变回灰色边框。

总之，失去焦点伪类是CSS中非常有用的选择器，在表单元素的处理中尤其重要。通过失去焦点伪类，我们可以实现表单元素样式的动态切换，从而加强用户体验。