Question

Hy大家，

我尝试构建一个带有sass的导航栏，如下所示：

带一行的导航栏

到目前为止，第一行没有问题：

第二行的棘手问题是，当导航栏与另一个项目展开时，border-radius应该在第二行对齐。见这个例子：

enter image description here

第六项只应在右下方有一个border-radius。

希望我的解释清楚。有没有人有一个建议我怎么能用sass管理这个？

这里有一些片段：

<div class="tabs">
<button class="tab"><button class="btn">1. Topic</button>
<button class="tab"><button class="btn">2. Topic</button>
<button class="tab"><button class="btn">3. Topic</button>
</div>

的CSS：

.tabs{
width: 100%;
display: flex;
justify-content: start;
align-content: center;
flex-wrap: wrap;
}

.tab{
&:first-child:not(:last-child) {
.btn {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}
&:last-child:not(:first-child) {
.btn {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
}
&:not(:first-child):not(:last-child) {
.btn {
border-radius: 0px;
}
}
}

Answer 1

这有点毛茸茸，但我会尽力在这里分解。基本上，您可以使用五个不同的选择器来选择所需的每种情况：

第一项。
第三项。
最后一项。
最后一行的第一项。
最后一行的最后一项。

无论如何，第一项始终需要在左上角有边框半径，所以我们添加它。

.tab {
  &:first-child .btn {
    border-top-left-radius: 1em;
  }
}

第三项始终位于整个列表的右上角（但是列表的右上角并不总是第三项，我会回到这一点），所以另一种方法很简单选择器添加。

.tab {
  &:first-child .btn {
    border-top-left-radius: 1em;
  }
  &:nth-child(3) .btn {
    border-top-right-radius: 1em;
  }
}

列表的最后一项始终需要右下边界半径。

.tab {
  &:first-child .btn {
    border-top-left-radius: 1em;
  }
  &:nth-child(3) .btn {
    border-top-right-radius: 1em;
  }
  &:last-child .btn {
    border-bottom-right-radius: 1em;
  }
}

现在不那么解释了。我们需要选择最后一行的第一项。知道每行有三项，则使用:nth-child(3n - 2)选择每行的第一项。这将选择第一，第四，第七等等。

我们需要将其与:nth-last-child伪类结合使用，以排除不在最后一行中的项目。 :nth-last-child(-n + 3)将选择最后三个项目，因此，如果我们将两者结合起来，就会有解决方案。

.tab {
  &:first-child .btn {
    border-top-left-radius: 1em;
  }
  &:nth-child(3) .btn {
    border-top-right-radius: 1em;
  }
  &:last-child .btn {
    border-bottom-right-radius: 1em;
  }
  &:nth-child(3n - 2):nth-last-child(-n + 3) .btn {
    border-bottom-left-radius: 1em;
  }
}

到目前为止，一切都很好，但是还有一步。现在，我们已将border-radius应用于所有四个角，但仍需要确保每个完整行的最后一个项都得到border-bottom-right-radius。

这意味着您需要使用:nth-child(3n)选择每三个项目，并使用我们先前示例中的:nth-last-child(-n + 3)将结果过滤过滤到最后三个项目。

.tab {
  &:first-child .btn {
    border-top-left-radius: 1em;
  }
  &:nth-child(3) .btn {
    border-top-right-radius: 1em;
  }
  &:last-child .btn {
    border-bottom-right-radius: 1em;
  }
  &:nth-child(3n - 2):nth-last-child(-n + 3) .btn {
    border-bottom-left-radius: 1em;
  }
  &:nth-child(3n):nth-last-child(-n + 3) .btn {
    border-bottom-right-radius: 1em;
  }
}

为了确保我们的列表中的少于三个项目看起来不错，让我们将“ border-top-right-radius”移至最后一个项目“ ”，如果它位于第一个项目中行，因此第一项或第二项。

.tab {
  &:first-child .btn {
    border-top-left-radius: 1em;
  }
  &:nth-child(3) .btn {
    border-top-right-radius: 1em;
  }
  &:last-child .btn {
    border-bottom-right-radius: 1em;
  }
  &:nth-child(3n - 2):nth-last-child(-n + 3) .btn {
    border-bottom-left-radius: 1em;
  }
  &:nth-child(3n):nth-last-child(-n + 3) .btn {
    border-bottom-right-radius: 1em;
  }
  &:nth-child(-n + 2):last-child .btn {
    border-top-right-radius: 1em;
  }
}

我创建了一个CodePen demo，以帮助您了解需要选择的项目和需要应用的规则。随意使用列表中的项目数。

带有不同按钮样式的css导航栏

1 个答案: