平时总是会遇到一些需要用的却又比较少用的css,但是这些css又非常实用,可以为我们的开发工作带来极大的方便,但是有一些用过的也总是会忘,每次都要去查,所以就简单整理一下,做个笔记吧。(ps: 暂时就想到这么多,后续想到再加上)
隐藏滚动条
&::-webkit-scrollbar {
display: none;
}
ios设备滚动圆润
-webkit-overflow-scrolling: touch;
禁止页面内容被选中(会被继承)
user-select: none;
单行文本溢出显示省略号
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
多行文本溢出显示省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; (行数)
overflow: hidden;
css获取当前dom的内容
<div class='dome' alt='123'/>
.dome{
&:after{
content:attr(alt);
}
}
此时content的attr()属性可以获取到当前dom的alt值
css行号填充
<li>这是第几行啊</li>
<li>这是第几行啊</li>
<li>这是第几行啊</li>
<li>这是第几行啊</li>
li{
&:after{
content: counter(step) '、';
counter-increment: step;
}
}
效果如下:
元素禁止所有事件
pointer-events: none;
该属性会使当前元素不可触发事件,即使在所有元素的最上层,也会透下去