我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发加微信，交友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。在掘金栏目页面，首先输入一个用户的栏目列表，例如：HullQin的栏目-掘金。显示如下图：有没有发现错误？放大！它的底部有一条分界线，紧挨着整个白色背景卡的底部。强迫症让人受不了！这不像是设计师给的设计稿。这个结果更像是前端开发者妥协的实施方案（看完下一节就知道原因了）。虽然我们掘金用户拿不到设计稿，但我们不妨假设这与设计稿不符，姑且称之为样式bug吧。bug的原因我们来查下dom，这一行是怎么实现的？哦，原来是写在这个div的border-bottom里的。看到data-v这个标签，我们不妨大胆假设一下，掘金是用Vue框架开发的。而且每个nugget列的html看起来非常相似，因此您不妨假设每个nugget列都是一个Vue组件。因为掘金的前端开发人员将“一栏”封装成组件，所以每个组件看起来必须是一样的。而开发者并没有开发这个逻辑：如果判断为最后一列，则删除边框样式。导致了这个结果。可能是没有人注意到，或者bug并不严重，所以直接发布了。为什么我一开始就说这是前端开发者妥协的实现呢？因为添加判断逻辑比较麻烦，而且产品可能不会明确要求你这样做，所以前端开发人员没有添加这个逻辑。这样可以节省一点时间来处理其他更重要的需求。直截了当的解决方案我们需要向这个“一列”组件添加一个输入参数，告诉您是否要底部的分界线。默认情况下需要一条分割线。如果传入的参数不需要分隔线，则使用border-bottom:0覆盖border-bottom样式。这种显示同一个组件的循环通常是用v-for来实现的。我们在写v-for的时候只需要判断是否是最后一项，如果是最后一项就设置上面的参数，这样就不需要分界线了。当然，以上只是针对掘金现有的技术实现提出的最快方案。其实这样的实现是不合适的。我们还把js逻辑混入了css判断。其实这些css内部是可以闭环的，不需要依赖js。如果能将JS和css解耦，一般认为是更好的实现方案。更好的实现方式如果让你实现列的分割线，你会有什么实现方式？css伪类选择器为列表项的子元素设置样式border-top。然后通过:first-child或:nth-child(1)选择第一个子元素，并为其设置styleborder-top:0。这样可以保证相邻元素之间有分界线，但是整体元素的顶部和底部没有分界线，这两个地方可以根据需要添加额外的分界线（组件放置在不同的地方，外部分割线的长度或粗细可能会有所不同，因此通常不会将此实现放入组件中）。使用*+*这个很棒的css选择器来解释：css选择器中的+表示选择相邻的兄弟节点。参考：Adjacent_sibling_combinator。比如每一列的类都是column，我们可以使用.column+.column自动排除第一个元素！比以前的方法更简洁！我也推荐它！效果如下：代码段超赞的css选择器上面的方法不是很友好。这种风格必须写成.column+.column，不够通用。如果你想对其他列表使用相同的分割线样式，你必须复制线border-top:red1pxsolid;给其他人，例如.xxx+.xxx。如果第一个列表项被display:none隐藏，那么就会出错。因为第二个item也会被+css选择器选中，导致上边框。如下：代码片段如何解决？我们采用这样的做法：为了解决第一个问题，我们结合了选择子类的>css选择器。参考：Child_combinator。为了解决第二个问题，我们使用~选择器和:not(hidden)伪类选择器。参考：General_sibling_combinator。不多解释，直接上精彩代码！！！.divide>:not([hidden])~:not([hidden]){border-top:blue1pxsolid;}换句话说，我们只需要定义一个class，也可以叫divide，然后alldivide的子元素总会有一条分割线！并完美解决了display:none带来的问题。哪里需要分界线，只需要那些item的父元素，定义一个class="divide"，分界线就会自动生成！！！惊人的！代码片段写在最后。我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发送加微信，交朋友）。转发本文需征得作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。
