Question

我正在使用[布尔玛] 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类中包括的所有锚的样式也应用于下拉菜单中的锚。这将导致可怕的渲染。

我当然可以编写自己的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;
}

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

1 个答案: