页面css的常用代码

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的倍数