选取第一个元素,在css添加
li:first-child{
background-color: blue;
}
选取最后一个元素
li:last-child{
background-color: pink;
}
选取里面第几个的元素
li:nth-child(4){
background-color: plum;
}
超出省略号
width: 200px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
字体引入
@font-face {
font-family: 'ERASMD';
src: url('ERASMD.TTF')
}
div {
font-family: ERASMD
}
CSS3滤镜
filter:
none
blur(10px)
brightness(150%)
contrast(150%)
drop-shadow(8px 8px 10px red)
grayscale(50%)
hue-rotate(90deg)
invert(100%)
opacity(30%)
saturate(800%))
sepia(100%)
z-index失效场景
- iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效
- transform动画