css - 使继承的CSS样式不相交的SASS解决方案

Question

我正在使用 [Bulma] CSS 框架 1 .此 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 中包含的所有 anchor 类也应用于下拉列表中的 anchor 。这将导致可怕的渲染。

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

我想知道我是否可以通过使用 SASS 或仅使用 CSS 来解决这种情况，以便将样式应用于具有 .dropdown-item 的 anchor 与 tabs.a 定义的不相交.

Answer 1

您可以重写 .tabs 语句。

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

这样，它就不会再影响任何下拉 anchor 了。

---

编辑，另一种方式:

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