这10个CSS技巧——据说能让你前端工作更轻松?

掌握这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培训官网，图片来自公开网络，转载请注明出处。