选中节点的相邻节点底部border-radious左边不生效

Question

选中节点的相邻节点底部border-radious左边不生效 "全部" 这个标签后边的border-bottom-right-radius: 20rpx; 没有生效
我的代码如下

```javascript
        <view class="tabs">
            <view
              v-for="(tab, index) in list"
              :key="index"
              :class="['tab', { active: current === index }]"
              @tap="tabChange(index)"
            >
              <text>{{ tab }}</text>
            </view>
          </view>

```javascript
data() {
    return {
        list: ['全部 11', '冲 12', '稳 13', '保 14'],
        current: 0,
        }
}

```css

.tabs {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f0f0f0;
}

.tab {
  padding: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  text-align: center;
  flex: 1;
  background-color: #e0e0e0;
  color: black;
  font-size: 16px;
}

.tab.active {
  background-color: white;
  color: red;
  font-weight: bold;
  border: 1px solid #ccc;
}

.tab + .active {
    border-bottom-right-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
}

.active + .tab {
    border-bottom-left-radius: 20rpx;
}
.tab.active {
    border-bottom-right-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
}

.tab + .active {
    border-bottom-right-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
}


.tab-content {
  padding: 20px;
  background-color: #ffffff;
  margin-top: 10px;
  border-radius: 10px;
}

```

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

从您提供的代码和描述来看，您似乎希望选中节点的相邻节点的底部边框圆角(border-bottom-left-radius)不生效。这可能是由于CSS选择器和样式应用的方式导致的。

在CSS中，.tab + .active 和 .active + .tab 这样的选择器可能不会如您预期的那样工作。它们尝试选择直接相邻的 .tab 和 .active 元素，但在您的HTML结构中，并没有直接的相邻关系（即一个元素紧接着另一个元素）。因此，这些样式可能没有被正确应用。

为了解决这个问题，您可以尝试以下方法：

1. 使用JavaScript动态添加样式: 当某个tab被选中时，通过JavaScript动态地为该tab或其相邻元素添加特定的样式类。这样，您可以精确地控制哪些元素应用哪些样式。
2. 调整CSS选择器: 如果您想使用纯CSS来实现这一点，可能需要重新考虑您的CSS选择器。可能需要使用更具体的选择器或直接操作DOM结构以确保正确的样式应用。
3. 检查其他样式的影响: 确保没有其他样式（如内联样式或其他CSS规则）覆盖或影响到您的.tab元素的border-bottom-left-radius属性。

基于您提供的代码，我建议您尝试第一种方法（使用JavaScript动态添加样式），因为它可能更直接地解决您的问题。您可以监听tab的点击事件，并在JavaScript中为该tab或其相邻元素动态添加类来改变其样式。