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个元素 */
}
