使用stylus选择元素列表的中后n个并为他们单独设定样式

在开发这种类似表格的页面时我遇到一个需求,那就是表格中每一个元素要有边框,但是最底下那一排元素不需要底部边框,但是表格每行个数不定,可能是3个可能是4个,我便用stylus写了一个函数。

具体实现是这样的:

对于每一个 li 即城市名,它有一个右边框,一个下边框。随意这会让最右边多一排右边框,但是用了border.css(解决1像素边框问题的css文件)后右边那个是看不出来的,我们就主要解决下边框问题。

stylus函数如下:

noBoderBottom(num)
  for i in 1..num
    &:nth-last-of-type({i})
      border-bottom 0

编译出来的CSS就成了这样,很好用!

 

 

 

--------------------------------------分割线----------------------------------

我找到一个技巧,设置子元素的magin-bottom: -1px,直接在父元素上overflow: hidden就好。。。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值