CSS那些超好用的样式

1、选择第n个标签

<div class="content">
    <span class="one"></span>
    <span class="two"></span>
    <span class="three"></span>
</div>

选择content下第一个标签

.content {
    span:first-child {
        color: red;
    }
}

选择content下最后一个标签

.content {
    span:last-child {
        color: red;
    }
}

选择content下第n个标签

.content {
    span:nth-child(n) {
        color: red;
    }
}

2、border、padding不计入宽高

box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */ 
-webkit-box-sizing: border-box; /* Safari */

3、把图片设置为背景

background: url("~@/assets/images/login/bg.png") center center no-repeat;
background-size: 100% 100%;

4、伪类样式

以tab栏下划线举例。

content: "";
width: 60%;
height: 0.04rem;
background-color: $blue;
position: absolute;
bottom: -6px;
left: 50%;
transform: translate(-50%, 0);

常用伪类

1. :hover
2. :active
3. :before
4. :after

5、文字溢出省略号

单行

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 几行省略
-webkit-box-orient: vertical;

注意：多行省略不能有 padding-bottom，否则下面的文字会显示出来。

6、纯字母换行

word-break: break-all; // 只对英文起作用，以字母作为换行依据
word-wrap: break-word; // 只对英文起作用，以单词作为换行依据

7、三角形、梯形

三角形： 元素本身没有画三角形的样式，但是边框两边是斜角，所以只要把元素宽高设为0，再把边框设成透明，保留其中一个边框即可

width: 0;
height: 0;
border-bottom: 100px solid #333;
border-left: 100px solid transparent;
border-right: 100px solid transparent;

梯形： 和三角形原理相同，但是需要设置宽度或者高度其中之一，边框依然只保留其中一个颜色，其余皆设置为透明，但两边要比保留的那一边要小

width: 100px;
height: 0;
border-bottom: 100px solid #333;
border-left: 30px solid transparent;
border-right: 30px solid transparent;

8、事件穿透

pointer-events: none; // 捕获不到任何点击，让事件穿透到它的下面，默认auto

9、文字水平对齐

text-align: right;
text-align: left; 
text-align: center; 

10、绝对定位

举例： 垂直水平居中

// 父元素
position: relative;

// 子元素
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

11、滚动条

1. 修改滚动条颜色和粗细

::-webkit-scrollbar-track-piece {
  background: #ebebeb;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: #c9c9c9;
  border-radius: 3px;
}

2. 隐藏滚动条

::-webkit-scrollbar-track-piece {
	background: #ebebeb;
}

::-webkit-scrollbar {
	width: 0px;
}

::-webkit-scrollbar-thumb {
	background: #c9c9c9;
	border-radius: 0px;
}