纯css实现点击变色

使用伪类选择器
:active 在点击状态下变色（鼠标需长按）
:focus 在聚焦状态下变色（鼠标可以离开但是在其他地方点击取消聚焦）
div li 等标签如果要实现此效果需要在标签加tabindex属性

<li tabindex="1">点击变色</li>
li{
        position: relative;
        width: 200px;
        height: 62px;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
        &:hover,&:active,&:focus{
          &{
            outline: none;
          }
          &:before{
            background: red;
          }
        }
        &:before{
          position: absolute;
          left: 0;
          top: 0;
          content: '';
          width: 16px;
          height: 100%;
          background: #fff;
        }
      }