一些不常用却非常使用的css属性

平时总是会遇到一些需要用的却又比较少用的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;
该属性会使当前元素不可触发事件,即使在所有元素的最上层,也会透下去
 
 
 
 

猜你喜欢

转载自www.cnblogs.com/langkezzz/p/12448680.html