1、文字显示几行多余省略
div{
overflow:hidden;
display:-webkit-box; /*将对象作为弹性伸缩盒子模型显示;*/
text-overflow:ellipsis;/*溢出部分用省略号代替*/
-webkit-line-clamp:2; /*设置文本显示两行*/
-webkit-box-orient:vertical; /*从上到下排列子元素*/
white-space:normal;
}
2、css伪类nth-child的特殊用法
选取.box下的第2个li,使第二个li文字颜色为红色。
.box li:nth-child(2){
color:#f00
}
让.box下的li大于4的文字颜色为红色
.box li:nth-child(n+4){
color:#f00
}
让.box下的前4个li的文字颜色为红色
.box li:nth-child(-n+4){
color:#f00
}
让.box下的li为偶数的文字显示为红色
.box li:nth-child(2n){
color:#f00
}
.box li:nth-child(even){
color:#f00
}
两个方式都可以
让.box下的li为奇数的文字显示为红色
.box li:nth-child(2n-1){
color:#f00
}
.box li:nth-child(odd){
color:#f00
}
两个方式都可以
:nth-child(3n+1)表示‘隔二取一’
.box li:nth-child(3n+1){
color:#f00
}
选取第一个和最后一个元素
.box li:first-child{
color:#f00
}
.box li:last-child{
color:#f00
}
选取倒数第几个元素
.box li:nth-last-child(3){
color:#f00
}
倒数第3个元素文字颜色为红色
选取倍数元素
.box li:nth-child(3n+3){
color:#f00
}
选择3的倍数
.box li:nth-child(4n+4){
color:#f00
}
选择4的倍数