「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。
在日常工作中有时候会遇到很多样式或者功能需要使用js配合设置，但是如果足够了解CSS的话，其中一部分的内容其实只使用CSS就可以实现；
所以我在这里会罗列我我个人使用频率比较高的小技巧，希望我自己能坚持维护这篇文章，以后再学到新的好的CSS使用方式，再更新进这篇文章；
如果有人能分享一些思路在评论区，我也会查阅资料后添加进来；
calc函数
一般我在处理一侧固定尺寸一侧自适应的页面会使用calc函数，因为无论是顶部还是侧边需要固定尺寸，那么另外一侧的宽度就可以直接使用calc函数计算出来了;
// 下面的例子就是左侧固定宽度，右侧自适应
.left {
width: 100px;
height: 100vh;
}
.right {
width: calc(100% - 100px);
height: 100vh;
}
当然calc不仅仅只有这么点作用，calse函数可以在css中进行简单的计算（加减乘除），他不仅可以对确定的值做计算，还可以对css变量进行计算；
// 下面的例子中'box-1'的宽永远占'box'的一半
.box {
--myWidth: 1920px;
width: var(--myWidth);
}
.box-1 {
width: calc(--myWidth / 2);
height: 100vh;
}
这样写还有一个好处就是如果项目中使用了类似lib-flexible的依赖对px进行了转化，那么就不会出现在js中动态修改尺寸需要重新计算的问题；
长文本超出自动转化为...
在项目中经常会遇到长文本的显示问题，而在一开始，我都是先判断字符串长度，然后根据适合的长度去截取字符串，再添加上'...'，这样不仅麻烦，假设宽度出现变化，需要截取的长度也得跟着变化；
知道我发现了text-overflow这个属性，设置这个属性后，当块状元素内的文本溢出是自动转化为'...'
<p class="txt">aaaaaaaaaaaa</p>
<style>
.txt {
overflow: hidden;
text-overflow: ellipsis;
}
</style>
CSS选择器
我自己比较常用的是下面几个：
- :nth-child(1) - 首先找到所有当前元素的兄弟元素，然后根据你输入的值匹配第几个元素
- :last-child - 当前元素集合中的最后一个元素
- :first-child - 当前元素集合中的第一个元素
- :not()
前三个比较好理解，大家在日常中也应该经常使用，最后一个:not()我也是最近才发现的；大部分选择器都是进行赋值的操作，而:not()进行的是非的操作，并且他可以对选择器和元素进行操作；
// 设置非 <p> 元素的所有元素的背景色
:not(p) {
color:#ff0000;
}
// 也可以直接使用伪类作为条件
// 但是有一个小问题，就是这里的p标签如果没有包裹在一个div下面的话是不起作用的，我也不明白为什么
p:not(:last-child) {
color: #f40;
}
