问题
遇到一个需求,通过给div设置伪类:focus来被点击后变色的效果,但是当给div设置伪类:focus后发现并没有生效。

:focus :在元素获得焦点时向元素添加特殊的样式(如果是给元素设置颜色样式的话,被点击后变色,且颜色在点击后不消失)

原因
百度了一下才发现div是 不支持:focus伪类 的,因为 div等元素无法接受键盘或其他用户事件

解决方法
解决方法就是可以给div元素添加tabIndex属性,使其能够支持:focus伪类。
tabIndex属性:利用tab键遍历页面的表单元素和链接,按照tabindex的大小决定顺序,同时也有指示其元素是否可以聚焦(获得焦点)的作用。

代码:

//结构
<div tabindex="1"></div>


//样式

div:focus{
    color: rgb(85,26,139);
}


 

Logo

前往低代码交流专区

更多推荐