CSS user-select:,::selection,con

2017-07-23  本文已影响23人  简不简单_都好

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
上一篇下一篇

猜你喜欢

热点阅读