这是我参与更文挑战的第9天，活动详情查看： 更文挑战
前言
以下都是一些我积累的一些css技巧，有些在我工作中用的很多，有些相对较少。
同时，为了让大家更清楚什么情况下使用，我会贴出关于属性的兼容情况。
希望能帮助到大家。
一、文字两端对齐
在工作中，会有实现如下图中的效果需求。在规定/有限的尺寸，使文字实现两端对齐，看起来会比较美观。
以前傻傻的用空格（ ）填充过。
也用span标签包括，然后计算距离，但是都不好用。
今天，他来了（哈哈哈，抄一下台词。）
<ul class="justify-text">
<li>账号</li>
<li>密码</li>
<li>电子邮件</li>
<li>通讯地址</li>
</ul>
<style>
.justify-text li{
padding: 0 20px;
width: 50px;
height: 40px;
color: #fff;
line-height: 40px;
text-align: center; /* 不兼容text-align-last属性时，居中显示 */
background-color: #f66;
text-align-last: justify; /* 核心属性 */
}
li + li { margin-top: 5px; }
</style>
复制代码兼容如下
可以看到，部分浏览器兼容性不是很好。 所以加了一个text-align居中属性，在不兼容的情况下，文字居中显示。
需要使用到的小伙伴，注意考虑下用户浏览器哦。
二、文本溢出隐藏
这个需求肯定是看腻了的。
但是以防还有小伙伴不清楚，所以写一写。
/* 在css中的话， 为了方便调用，会简历一个通用类名来存储 */
.c-line-1{
overflow: hidden;
white-space: nowrap; /* 禁止换行 */
text-overflow: ellipsis; /* 超出部分替换为省略号 */
}
.c-line-2{
display: -webkit-box;
-webkit-line-clamp: 2; /* 显示为两行 */
-webkit-box-orient: vertical;
overflow: hidden;
}
复制代码兼容如下
相对来说，处理还好和惨烈的边缘，所以酌情使用。
那么使用的时候，就有技巧了。
一般我会添加一个固定高度。 这样子的话，即时因为兼容问题导致不可用，也不会出现破版的情况。
再加一种基于scss预处理器的写法，会更灵活一些。
@mixin textOverflow($num: 1){
@if $num == 1{
// 处理单行情况
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} else {
// 处理多行
display: -webkit-box;
-webkit-line-clamp: $num; /* 显示为两行 */
-webkit-box-orient: vertical;
overflow: hidden;
}
}
复制代码三、纯css实现计数器。
这个是我在张鑫旭大佬的文章中学来的。
理性来讲，实际开发中来讲，以为过于冷门，感觉会不如用js实现，而且js不是很需要考虑兼容的问题。
但是既然能实现，还是写出来，提供更多思考的可能性。
<p>choice tag</p>
<input hidden type="checkbox" id="topic1"> <label for="topic1" class="topic">Vue</label>
<input hidden type="checkbox" id="topic2"> <label for="topic2" class="topic">React</label>
<input hidden type="checkbox" id="topic3"> <label for="topic3" class="topic">TS</label>
<p>Choised <span class="topic-counter"></span> tag</p>
<style type="text/css">
[type="checkbox"]{
position: absolute;
clip: rect(0,0,0,);
}
label{
padding: 4px 16px;
border: 1px solid #78b9f7;
}
body{
counter-reset: topicCounter; // 创建一个计数器
}
:checked + .topic{ // 每个别选中的input都会触发计数器+1
counter-increment: topicCounter;
background-color: #78b9f730; // #78b9f7 是颜色 30是透明度
}
.topic-counter::before{
color: red;
content: counter(topicCounter); // 输出计数器数字
}
</style>
复制代码四、css选择器：Don't repeat yourself
css3的发布，新增了许多新的选择器，部分如下图。
全部选择器，可点击链接查看
我在工作中，最喜欢用的就是选择以特定字符串结尾的选择器。
.ele[$="__btn"]{}
复制代码这个选择器让我可以节省许多重复属性的书写。
但凡我的按钮需要用到这些公共的属性，我就加上"__btn"后缀，轻松加愉快。
五、css3选择器：刨根问底，划分界限。
前面提到的css3选择器中，还有一个根节点选择器 :root，这个选择器，可以选择当前文档的根元素，并添加属性。
我常用来修改全局盒模型，尽管看起来和直接使用通配符"*" 没啥区别,但事实并非如此。
:root{
box-sizing: border-box;
}
*,
::before,
::after{
box-sizing: inherit;
}
.frame-root{
box-sizing: content-box;
}
复制代码可以看到，首先通过根节点设置了文档的盒模型属性
之后的frame-root并不是具体的类型，而是指代引入的UI库的根节点。
在这样设置之后， 犹豫使用通配符设置素有的元素，盒模型都采用继承。
UI库中的元素会继承父级也就是UI库根节点的内容盒模型， 其他元素会向上查到根节点，继承自定义盒模型。
这个用法，是因为我有一次，显示自己写样式，之后还是觉得用框架比较好， 但是中途引入框架，势必因为自己修改了盒模型而导致样式崩塌，于是有了这个写法。
希望你用不上。
六、css3选择器：提升优先级。
相信不少前端的小伙伴，都有过被css的优先级折磨的精力吧？
无论如何，我是很讨厌写行内样式， 对于 !important我也用的少（强迫症）
所以我一般会使用如下方式来提升优先级。
.bar.bar{ css } /* 重复选择自己，也不算很美观，但是class的权重double */
.bar[class]{ css } /* 通过css3的选择器来选择class属性， 提升优先级 */
#bar[id]{ css }
复制代码但是这里有一点要注意，优先级提升的程度，只够用于同级别的类名，避免被后面覆盖的。
也就是说 .bar[class] 只能避免被后面的.bar覆盖， 但仍然无法覆盖前面的#bar
总结
这篇文章是一些技巧，并非是css属性指南，所以暂时就这么多了。希望对各位小伙伴有所帮助。
另外，css，尤其是随着css3的发布，有很多暂时还很冷门， 但是很有趣，也挺使用的属性，等着你我去挖掘。
我也会继续收集并发布出来的。
