掌握这10个CSS实用技巧可让你的前端工作更轻松，尤其是初学前端的小白，即使现在看不懂也可收藏起来，以备需要时用上。如果你是高手有话要说，欢迎在留言区发表高见。
废话不多说，直接上干货：
一、使用 :not() 在菜单上应用/取消应用边框
我们通常的做法是先给每个菜单项设置边框，然后再设置最后一个菜单的边框为零。
其实不需要这么麻烦，使用 :not() 伪类即可达到同样的效果，而且代码更干净，易读。
二、使用counter()在列表中自动添加序号
使用它，你能方便的在页面标题，区块和其它各种连续出现的页面内容上添加序号。有了它，你就不必限制于只能使用
来实现这个效果，你可以更灵活的在页面上使用自定义数字序列。
三、使用calc()做算术
这个函数可以执行简单的算术计算，例如计算元素的长宽，不用写JS代码。这个函数支持所有简单的基本算术运算，包括加减乘除。
四、使用: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()表达式。
注：在新版的CSS3标准中，attr()功能被扩展，可以用在各种CSS标记中。
六、给 body添加行高
你不需要分别添加 line-height ，只要添加到 body 即可。
这样文本元素就可以很容易地从 body 继承。
七、表格列宽自适用
当要调整表格列宽时，是比较痛苦的。这里有一个可以使用的技巧：给td元素添加white-space: nowrap;能让文本正确的换行。
八、包裹长文本
如果你碰到一个比自身容器长的文本，默认时，不管容器的宽度，文本都将水平填充。如下图：
这里，采用简单的CSS代码就能在容器中调整文本：
效果如下图：
九、实现loading省略号动画
使用CSS3的帧动画来模拟loading文字后面的3个小省略号的动画效果,对于简单的加载状态是很有用的，而不用去使用gif图像。
十、背景渐变动画
CSS中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画。目前，你不能为渐变添加动画，但下面的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。
以上这10个CSS实用技巧，你学会了吗？当然，关于CSS的技巧还有很多很多，我们会在后续文章中根据不同用途给大家分类介绍。如果想学习更多软件开发方面的知识，可多多关注我们哦！
本文来自宝比万像it培训官网，图片来自公开网络，转载请注明出处。