乐趣区

关于前端:极致用户体验-我又来帮掘金修专栏bug了顺便教你个超牛逼的分割线CSS

jiezi

我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。

掘金专栏页面

你先进入一个用户的专栏列表，比方：HullQin 的专栏 – 掘金。展现如下图所示：

发现不对劲了吗？放大看！

它的底部有一条分割线，跟整个红色背景卡片的底部紧挨着，强迫症属实不能忍！

这不像是设计师给出的设计稿。这个后果，更像是前端开发者的一种斗争的实现计划（看完下一节，你就晓得起因了）。尽管咱们掘金用户拿不到设计稿，然而无妨假如这里跟设计稿不符，权且称之为一个款式 bug 吧。

导致 bug 的起因

咱们检查一下 dom，这条线是怎么实现的？

哦吼，原来是写在这个 div 的 border-bottom 外面。

看到 data- v 这个标签，咱们无妨大胆假如掘金是用 Vue 框架开发的。

而每个掘金专栏的 html 都长得很像，无妨大胆假如每一个掘金专栏都是一个 Vue 组件。

因为掘金的前端开发者把「一个专栏」封装成了组件，所以每个组件都必须长得一样。而且开发者也没有开发这种逻辑：判断是最初一个专栏，就把 border 款式删掉。就导致呈现了这个后果。

可能是没人留神到，或者 bug 不重大，就间接公布上线了。

为什么我结尾说这是前端开发者的一种斗争的实现计划呢？因为加判断逻辑，还挺麻烦的，而产品可能也没有明确要求你这么做，前端开发者就没加这个逻辑。这样省下了一点点工夫去做别的更重要的需要。

间接解决方案

  1. 咱们须要给这个「一个专栏」组件减少一个输出参数，告知你是否须要底部的分割线。默认是须要分割线的。如果传入参数不须要分割线，则用 border-bottom: 0 笼罩 border-bottom 的款式。
  2. 这种循环展现同一个组件的状况，通常都是用 v -for 实现的。咱们只须要在写 v -for 时，判断一下是否时最初一个 item，如果是最初一个 item，就把上述参数设置为不须要分割线，即可。

当然，以上只是针对掘金现有的技术实现，提出的最快的解决方案。其实，这种实现不太适合，咱们还杂糅了 js 逻辑到 css 判断里。而这些 css 其实是能够在外部闭环的，不用依赖 JS，如果能解藕 JS 和 css，通常被认为是更优的实现计划。

更优的实现形式

如果让你实现专栏的分割线，你会有哪些实现形式？

css 伪类选择器

针对列表我的项目的子元素，设置款式border-top。

再通过 :first-child 或:nth-child(1)选中第一个子元素，给它设置款式border-top: 0。

这样即可保障：相邻的元素之间有一条分割线，然而整体元素的顶部和底部是没有分割线的，这两个中央能够视需要额定增加分割线（组件放在不同的中央，内部分割线的长度或粗细可能不同，所以通常不会把这个的实现放进组件里）。

用 * + * 这个牛逼的 css 选择器

解释一下：+在 css 选择器中，示意抉择相邻兄弟结点。参考: Adjacent_sibling_combinator。

比方每个专栏的 class 是 column，咱们用.column + .column 即可主动排除第一个元素！比上一种形式更简洁！我也更举荐！成果如下：

代码片段

超牛逼的 css 选择器

下面的办法不太敌对。

  • 这个款式必须写到 .column + .column 外面，也就是说它不够通用。如果想给其它列表用同样的分割线款式，必须把 border-top: red 1px solid; 这一行复制给其它的比方 .xxx + .xxx 外面。
  • 如果第一个列表我的项目被 display: none 暗藏掉了，那么就出岔了。因为第二个我的项目也会被 + 这个 css 选择器选中，导致呈现了顶部的 border。如下：

代码片段

怎么解决呢？咱们应用这种办法：

  1. 解决第一个问题，咱们联合应用 > 这个抉择子类的 css 选择器。参考: Child_combinator。
  2. 解决第二个问题，咱们应用 ~ 这个选择器和 :not(hidden) 这个伪类选择器。参考: General_sibling_combinator。

不多解释了，间接上牛逼的代码！！！

.divide>:not([hidden])~:not([hidden]) {border-top: blue 1px solid;}

也就是说，咱们只须要定义一个 class，无妨叫做divide，那么divide 的所有子元素之间，都会有一个分割线！并且完满解决了 display: none 带来的问题。

但凡你须要分割线的中央，只须要那些我的项目的父亲元素，定义一个 class="divide" 即可，分割线主动生成！！！Amazing！

代码片段

写在最初

我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。

退出移动版