文本多次被点击时显示背景色

<div class="k1">8888888</div>

.k1{
  width: 100px;
  height: 50px;
  background-color:yellow;
  // -webkit-user-select:none;
  // -moz-user-select:none;
  // -o-user-select:none;
  // user-select:none;
}

先看效果：

当div被多次点击时，文本部分有显示一个背景色

解决方法：

-webkit-user-select:none;   /*谷歌、苹果浏览器*/
-moz-user-select:none;      /*火狐浏览器*/
-o-user-select:none;        /*欧朋浏览器*/
-ms-user-select:none;       /*IE浏览器*/
user-select:none;

为什么要使用user-select

在样式开发中，有可被选中， 和不可被用户选中的元素。这时候就用到 了今天介绍的user-select属性。

user-select的属性值

 

注意

浏览器实现之间的区别之一是继承

浏览器	继承
Firefox(-moz-user-select)	不是由决定定位元素继承
Safari和Chrome(-webkit-user-select)	是由绝对定位元素继承