css 记录一些偶尔会用到的样式,但是又是比较实用的,会持续更新
1、长字符串或者数字强制换行
word-wrap:break-word
2、单行文本超出部分以省略号显示
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
3、多行文本超出部分以省略号显示(只兼容webkit或者移动端)
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box; //将对象设置成弹性盒子模型显示
-webkit-box-orient:vertical;//子元素竖排排列
-webkit-line-clamp:2; //显示的行数
4、首行缩进
text-indent: 10px;
取消缩进
text-indent: 0px;
小程序取消缩进
text-indent: 0rpx;
padding-left: 0rpx;
5、将鼠标设置成小手状态
cursor: pointer;
6、h5的video标签占满父元素,不考虑宽高比
object-fit:fill;
7、第几个选择器
(1)first-child表示选择列表中的第一个标签。
li:first-child{background-color:#f00}
(2)last-child表示选择列表中的最后一个标签
(3)nth-child(n)表示选择列表中的第n个标签
(4)nth-child(2n) 这个表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签
(5)nth-child(2n-1)这个表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签
(6)nth-child(n+3)这个表示选择列表中的标签从第3个开始到最后
(7)nth-child(-n+3)这个表示选择列表中的标签从0到3,即小于3的标签
(8)nth-last-child(3)这个表示选择列表中的倒数第3个标签
8、修改input的placeholder的颜色
input{
color: #000;
font-size: 18px;
::-webkit-input-placeholder { /* WebKit browsers */
color:#969696;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#969696;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#969696;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:#969696;
}
}