SASS解决方案使继承的css样式脱节

Question

我正在使用[Bulma] CSS framework1。此 CSS 框架为选项卡和下拉列表提供默认样式。对于选项卡，它(也(具有以下 CSS

.tabs.is-boxed a {
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}

而对于下拉菜单，它有

a.dropdown-item {
padding-right: 3rem;
white-space: nowrap;
}
a.dropdown-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
a.dropdown-item.is-active {
background-color: #3273dc;
color: #fff;
}

这意味着，如果您有一个或多或少如下所示的html

<div class="tabs">
<ul>
<li>
<!-- DROPDOWN GOES HERE -->   
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
</div>
</div>
</div>
<!-- DROPDOWN ENDS -->
</li>
</ul>
</div>

然后，应用于tabs类中包含的所有定位点的样式也会应用于下拉列表中的定位点。这将导致可怕的渲染。

当然，我可以编写自己的CSS，但我认为这将是一个违反常识和设计原则的可怕解决方案。

我想知道我是否可以通过使用 SASS 或只是 CSS 以某种方式解决这种情况，以使应用于具有.dropdown-item的锚点的样式与tabs.a定义的样式不相交。

Answer 1

您可以重写.tabs语句。

.tabs.is-boxed a:not(.dropdown-item) {
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}

这样，它就不会再影响任何下拉锚点。

---

编辑，另一种方式：

.tabs.is-boxed a.dropdown-item {
border: none;
border-radius: 0;
}