请选择 进入手机版 | 继续访问电脑版

#楼主# 4 天前

跳转到指定楼层
掌握这10个CSS实用技巧可让你的前端工作更轻松,尤其是初学前端的小白,即使现在看不懂也可收藏起来,以备需要时用上。如果你是高手有话要说,欢迎在留言区发表高见。

废话不多说,直接上干货:

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

一、使用 :not() 在菜单上应用/取消应用边框

我们通常的做法是先给每个菜单项设置边框,然后再设置最后一个菜单的边框为零。

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

其实不需要这么麻烦,使用 :not() 伪类即可达到同样的效果,而且代码更干净,易读。

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

二、使用counter()在列表中自动添加序号

使用它,你能方便的在页面标题,区块和其它各种连续出现的页面内容上添加序号。有了它,你就不必限制于只能使用

来实现这个效果,你可以更灵活的在页面上使用自定义数字序列。

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

三、使用calc()做算术

这个函数可以执行简单的算术计算,例如计算元素的长宽,不用写JS代码。这个函数支持所有简单的基本算术运算,包括加减乘除。

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

四、使用: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的标签(
转播转播 分享淘帖
回复

使用道具

0

主题

61

帖子

132

积分

注册会员

Rank: 2

积分
132
轻狂的风在吹 发表于 4 天前
我div和li和这三个标签老不听我使唤
回复

使用道具 举报

0

主题

67

帖子

144

积分

注册会员

Rank: 2

积分
144
必须更多木 发表于 4 天前
attr学习了
回复

使用道具 举报

0

主题

62

帖子

134

积分

注册会员

Rank: 2

积分
134
绘粹凭 发表于 4 天前
转发了
回复

使用道具 举报

0

主题

79

帖子

168

积分

注册会员

Rank: 2

积分
168
Gemini迷妹 发表于 4 天前
转发了
回复

使用道具 举报

0

主题

74

帖子

158

积分

注册会员

Rank: 2

积分
158
七七小嗳 发表于 4 天前
转发了
回复

使用道具 举报

0

主题

75

帖子

160

积分

注册会员

Rank: 2

积分
160
aygx 发表于 4 天前
转发了
回复

使用道具 举报

0

主题

68

帖子

146

积分

注册会员

Rank: 2

积分
146
lkbt123 发表于 4 天前
转发了
回复

使用道具 举报

0

主题

58

帖子

126

积分

注册会员

Rank: 2

积分
126
朝霞698 发表于 4 天前
转发了
回复

使用道具 举报

0

主题

65

帖子

140

积分

注册会员

Rank: 2

积分
140
123457848 发表于 4 天前
转发了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则