CSS user-select:,::selection,content:

html

<p data-danwei="元">剩余话费40</p> 
<div class="box">
    <span>
        currentColor 
        <br><br>user-select: none 禁止选择文本
    </span><br><br>
    <span class="all">
        all
    </span>
    <br>
    <p>::selection</p>
</div> 

css

    *[data-danwei]:after { 
        content: attr(data-danwei); 
        color: #3b98e0;
    } 

    .box{
        width: 200px; 
        height: 200px; 
        color: #3b98e0; 
        border: 1px solid currentColor;/*其实不加颜色参数 默认继承内容的color*/ 
        
    }
    div span {
        user-select: none;
        -webkit-user-select:none;
        -moz-user-select:none;
        -o-user-select:none;
    }
    div span.all {
        user-select: all;
        -webkit-user-select:all;
        -moz-user-select:all;
        -o-user-select:all;
    }
    div p::selection {
        color: red;
    }

效果

微信图片_20170723225925.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 译者:旭日云中竹链接:http://www.zcfy.cc/article/1057原文:https://medi...
    IT程序狮阅读 11,360评论 8 200
  • 译者:旭日云中竹链接:http://www.zcfy.cc/article/1057原文:https://medi...
    51CTO学院阅读 10,627评论 2 179
  • 老师今天说,厨师是个门槛很低的职业,我们只是理论知识那些初中毕业高中毕业的好,其他的都是一样的。 的确我们功底不扎...
    应小枫子阅读 3,514评论 0 1
  • 很久之前就打算写这篇文章了,自己的拖延症导致这篇文章一直没有完成。今天太闲了,所以又提起笔来写。之所以写这篇文章...
    李劲夫阅读 2,900评论 0 0