css - 如果它们彼此相邻，是否合并具有 CSS border-radius 的列表项？

Question

我正在创建一个网络应用程序(一个副元素!)，我试图让它看起来不错，但遇到了一些 CSS 挑战😁，你能帮我吗？

示例，因为图片更容易:

例子1

👎我得到了什么:

👍我想要什么:

例子2

👎我得到了什么:

👍我想要什么:

我在这里托管了一个非常简单的 vuejs 示例:https://jsfiddle.net/ep8ny04d/3/

li {
  margin: 0;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  &.active {
    background: #39a374;
    color: white;
  }
}

(我的截图来自这个例子。)

所以问题是:两个元素必须粘在一起，但是如果选择了两个或多个元素并且彼此相邻，则必须更改元素的边界半径(或删除中间的元素)。

您认为可以不用 Javascript 吗？

Answer 1

您可以使用同级组合器、:first-child、:last-child 和 :not() 的组合来完成大部分工作(请注意，您需要从顶级 li 规则中删除 border-radius: 10px 声明):

li {
  margin: 0;
  padding: 10px;
  cursor: pointer;
  &.active {
    background: #39a374;
    color: white;
  }
  &.active:first-child, &:not(.active) + .active {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  &.active:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}

但这不会为紧接在 :not(.active) 元素之前的 .active 元素生成底部圆 Angular 。在使用 CSS 定位它们之前，您需要向这些特定元素添加另一个类。这可以在类绑定(bind)中完成，因此您可以避免污染数据模型(或者实际上，编写额外的应用程序逻辑，我认为这就是您所说的“没有 JavaScript”...):

<li v-for="(todo,i) in todos"
  v-on:click="toggle(todo)"
  v-bind:class="{active: todo.active, beforeInactive: todo.active && todos[i+1] && !todos[i+1].active}">
  {{i}} Hey
</li>

然后在 CSS 中引用:

li
  // ...
  &.active:first-child, &:not(.active) + .active {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  // Added reference to new .beforeInactive class
  &.active:last-child, &.beforeInactive {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}

Updated fiddle