html 点击选择变色,css实现选中后变色并且效果不消失

我在vue项目里面。想实现以下效果：

css实现选中后变色并且效果不消失。

我用了伪类。点击之后。确实会变色。

但是只是在鼠标点下去那一瞬间会变色。

当鼠标点完之后。效果就消失了。

我的代码：

• {{ item.topicClassName }}

css：li {

width: 68px;

height: 30px;

float: left;

margin-top: 30px;

margin-right: 40px;

display: inline-block;

background: #F6F6F6;

opacity: 1;

border-radius: 4px;

a {

display: block;

text-align: center;

line-height: 30px;

cursor: pointer;

span {

font-size: 14px;

color: #666666;

}

}

}

//li:first-child {

// background-color: #FFBF00;

//}

li:active{

background-color: #FFBF00;

span {

color: #FFFFFF;

}

}

请问怎么让它选中之后。颜色暂时不变啊？

如图：