自定义博客cnblogs样式的必备前端小知识——css

css样式相关小知识

 

文字超出一行显示省略号

overflow: hidden;   /*自动隐藏文字*/
text-overflow: ellipsis;   /*文字隐藏后添加省略号*/
white-space: nowrap;   /*强制不换行*/

 

文字超出两行显示省略号

overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2;    /* 限制行数 */
-webkit-box-orient: vertical;

 

样式优先级关系

!important > 内联样式 > id选择器样式 > 类选择器样式 > 元素选择器样式

 

过渡样式

transition: property duration timing-function delay;

transition-property:指定过渡的css属性名;当设置多个属性过渡时，属性之间用逗号隔开

transition-duration：过渡时间；规定了完成过渡需要花费的时间，可以为s或ms

transition-timing-function：规定属性过渡效果的速度曲线，取值可以为ease(默认值，慢速开始，快速变化，慢速结束) / linear(始终保持相同的速度) / ease-in(慢速开始，加速效果)/ease-out(有减速的效果) / ease-in-out(慢速开始和结束，先加速再减速)

transition-delay：过渡延迟，即多长时间以后再执行过渡效果，取值为秒或毫秒

 

禁止元素点击事件

.no-click{ pointer-events:none;}

 

webkit内核美化滚动条

/*整体部分*/ 
::-webkit-scrollbar
{
    width: 10px;
}
/*滑动轨道*/ 
::-webkit-scrollbar-track
{
    background: none;
}
/*滑块*/
::-webkit-scrollbar-thumb
{
    background-color: rgba(255,255,255,.75)
}
/*滑块效果*/ 
::-webkit-scrollbar-thumb:hover
{
    background-color: rgba(85, 85, 85, 0.4);
}

 

选取第n个元素

li:first-child{
    background:#fff    /* 首个元素 */
}
li:last-child{
    background:#fff    /* 最后一个元素 */}
li:nth-child(3){
    background:#fff    /* 指定第3个元素 */
}
li:nth-last-child(3){
    background:#fff    /* 指定倒数第3个元素 */
}