10个CSS技巧让你前端工作更轻松
掌握这10个CSS实用技巧可让你的前端工作更轻松，尤其是初学前端的小白，即使现在看不懂也可收藏起来，以备需要时用上。如果你是高手有话要说，欢迎在留言区发表高见。
废话不多说，直接上干货：
干货来了，赶紧做笔记。。。
一、使用 :not() 在菜单上应用/取消应用边框
我们通常的做法是先给每个菜单项设置边框，然后再设置最后一个菜单的边框为零。
1 | /* add border */ .nav li { border-right: 1px solid #666; }
//* remove border */ .nav li:last-child { border-right: none; } |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 |
其实不需要这么麻烦，使用 :not() 伪类即可达到同样的效果，而且代码更干净，易读。
1 | .nav li:not(:last-child) { border-right: 1px solid #666; } |
2 | |
3 |
二、使用counter()在列表中自动添加序号
使用它，你能方便的在页面标题，区块和其它各种连续出现的页面内容上添加序号。有了它，你就不必限制于只能使用
来实现这个效果，你可以更灵活的在页面上使用自定义数字序列。
1 | body { counter-reset: choose; } h4:before { counter-increment: choose; content: "Choose #" counter(choose) "."; } |
2 | |
3 | |
4 | |
5 | |
6 | |
7 |
三、使用calc()做算术
这个函数可以执行简单的算术计算，例如计算元素的长宽，不用写JS代码。这个函数支持所有简单的基本算术运算，包括加减乘除。
1 | .parent { width: 100%; position: relative; }
.child { position: absolute; left: 100px; width: calc(90% - 100px); } |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 |
四、使用:nth-child(n)选择项目
:nth-child(3) 表示选择列表中的第三个元素
:nth-child(2n)表示列表中的偶数标签，即选择第2、第4、第6……标签
:nth-child(2n-1) 表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签
:nth-child(n+3) 表示选择列表中的标签从第3个开始到最后（>=3）
:nth-child(-n+3) 表示选择列表中的标签从0到3，即小于3的标签(<=3)
:nth-last-child(3) 表示选择列表中的倒数第3个标签
:nth-of-type(n) 匹配属于父元素的特定类型的第 N 个子元素的每个元素
（注：第一个子元素的下标是1）
五、在CSS中用attr()显示HTML属性值
attr()功能早在CSS 2.1标准中就已经出现，它能通过CSS获取到html上的属性，在很多情况下都能帮你省去了以往需要Javascript处理的过程。
要想使用这个功能，你需要用到三种元素：一个:before或:afterCSS伪类样式，.content属性，和一个带有HTML属性名称的attr()表达式。
1 | h3:before { content: attr(data-id) " "; } <h3 data-id="1">This is a h3</h3> |
2 | |
3 | |
4 |
注：在新版的CSS3标准中，attr()功能被扩展，可以用在各种CSS标记中。
六、给 body添加行高
你不需要分别添加 line-height ，只要添加到 body 即可。
1 | body { line-height: 1; } |
2 | |
3 |
这样文本元素就可以很容易地从 body 继承。
七、表格列宽自适用
当要调整表格列宽时，是比较痛苦的。这里有一个可以使用的技巧：给td元素添加white-space: nowrap;能让文本正确的换行。
1 | td { white-space: nowrap; } |
2 | |
3 |
八、包裹长文本
如果你碰到一个比自身容器长的文本，默认时，不管容器的宽度，文本都将水平填充。如下图：
这里，采用简单的CSS代码就能在容器中调整文本：
1 | pre { white-space: pre-line; word-wrap: break-word; } |
2 | |
3 | |
4 |
效果如下图：
九、实现loading省略号动画
使用CSS3的帧动画来模拟loading文字后面的3个小省略号的动画效果,对于简单的加载状态是很有用的，而不用去使用gif图像。
1 | .loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\2026"; /* ascii code for the ellipsis character */ } @keyframes ellipsis { from { width: 2px; } to { width: 15px; } } |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 |
十、背景渐变动画
CSS中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画。目前，你不能为渐变添加动画，但下面的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。
1 | button { background-image: linear-gradient(#5187c4, #1c2f45); background-size: auto 200%; background-position: 0 100%; transition: background-position 0.5s; } button:hover { background-position: 0 0; } |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 |
以上这10个CSS实用技巧，你学会了吗？当然，关于CSS的技巧还有很多很多，我们会在后续文章中根据不同用途给大家分类介绍。如果想学习更多软件开发方面的知识，可多多关注我们哦!
