使用stylus选择元素列表的中后n个并为他们单独设定样式案例
程序员文章站
2022-03-26 17:50:10
使用stylus选择元素列表的中后n个并为他们单独设定样式
在开发这种类似表格的页面时我遇到一个需求,那就是表格中每一个元素要有边框,但是最底下那一排元素不需要底部边框,但是表格每行个数不定,可能是...
使用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就好。。。
上一篇: 【数据结构-C++语言】图篇
下一篇: 区别中英文控制输出字符串的长度