css 记录一些较少用的实用的样式_前端css一些比较少用的样式-优快云博客

本文介绍了一些实用的 CSS 样式技巧，包括长字符串换行、文本溢出省略、首行缩进、鼠标样式调整等，适用于网页布局优化。

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;
        }
}