更改顶部栏中 Foundation 下拉箭头的颜色答案

【问题标题】：Change color of Foundation drowpdown arrow in topbar更改顶部栏中 Foundation 下拉箭头的颜色
【发布时间】：2017-02-11 10:10:07
【问题描述】：

一直在尝试更改 Foundation 6 顶部栏中的下拉箭头，但没有成功forum answer。

我在 Foundation 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>

【问题讨论】：

请粘贴您的html和css

标签： html css sass zurb-foundation

【解决方案1】：

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

【讨论】：

【解决方案2】：

请使用这个：-

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

【讨论】：

【解决方案3】：

到期CSS Specificity。 “默认”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。

【讨论】：