CSS-一些实用却很少用到的属性

1、去除点击文字出现蓝色背景

.hbk{
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

2、鼠标覆盖高亮显示

div:hover {
    opacity: 0.8;
}

3、鼠标覆盖显示为小手指

div {
    cursor: pointer;
}

4、CSS模糊匹配

(1）选中class包含"icon"的元素

[class*="icon"]{
    color: blue
}

(2）选中class以"icon"开头的元素

[class^="icon"]{
    color: blue
}

(3）选中class以"icon"结尾的元素

[class$="icon"]{
    color: blue
}

5、calc() 函数

        calc() 函数用于动态计算长度值。

// less
.box {
    height: calc(~"100% - 20px");
}

// scss
.box {
    height: calc(100% - 20px);
}

6、input输入框限制只能输入数字

（1）设置type = number并隐藏上下箭头

<el-input v-model="thresholdValue" type="number"></el-input>

<style scoped>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type='number'] {
        -moz-appearance: textfield;
    }
</style>

（2）正则匹配输入框

<el-input v-model="thresholdValue" onkeyup="value=value.replace(/^\.+|[^\d.]/g,'')"></el-input>

7、text-align:justify 内容两端对齐

<div class="box">
    <div class="label">密 码</div>
    <div class="label">用 户 名</div>
    <div class="label">身 份 证 号</div>
</div>

<style>
    .box {
        width: 200px;
        height: 100px;
    }
    .label {
        width: 100px;
        text-align-last: justify;
    }
</style>

        注意每个单词之间都有空格，如果没有这个空格，兼容性很差，基本只有谷歌和火狐支持。