Question

尝试更改基金会6顶部栏中的下拉箭头，但对此forum answer没有好运。

我在基金会6中没有看到这些课程，所以我做的是：

.top-bar .is-dropdown-submenu-parent > a:after {
  border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

但仍然没有改变。

HTML（红宝石）：

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">
        <%= image_tag('logo.png', size: '40x40') %>
      </li>
      <li>
        <a href="/">Dashboard</a>
      </li>
      <li>
        <a href="#">Accounts</a>
        <ul class="menu vertical">
          <li><%= link_to 'Sales', sales_path %></li>
          <li><%= link_to 'Inventory', inventory_path %></li>
        </ul>
      </li>
      <li><%= link_to 'Settings', settings_path %></li>
    </ul>
  </div>
</div>

Answer 1

请使用此： -

.top-bar .is-dropdown-submenu-parent > a:after {
  border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)!important; 
 }

Answer 2

我看到你使用scss，所以你可以配置基础变量来改变组件视图。 Here是所有可用变量的列表。更改$dropdownmenu-arrow-color以将新颜色设置为箭头。

Answer 3

它到期CSS Specificity。＆＃34;默认＆＃34; Foundaiton选择器是

.dropdown.menu > li.is-dropdown-submenu-parent > a::after{}

注意选择器的第一部分，它使用两个类 - .dropdown和.menu，而您的选择器仅使用.top-bar。在第二部分中，还使用了li选择器。 Compare those two CSS selectors with this CSS specificity calculator

所以，使用那个选择器：

.dropdown.menu > li.is-dropdown-submenu-parent > a::after{
    border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

或者您可以使用!important。

更改顶部栏

3 个答案: