样式导航栏：不同样式设置之间的交互

Question

我在设置导航栏样式时遇到问题，尤其是导航栏中的下拉菜单。下面的两个li 元素（链接到“个人资料”和“编辑个人资料”的元素没有正确显示。如您所见，我以两种不同的方式添加了my-dropdown-item 类，都具有相同的结果。导航栏代码：

<div class="container">
 <div class="header">
  <div class="top-nav">
      <ul class="nav1">
          <li class="hvr-bottom <%= 'active' if current_page?(root_path) %>"><%= link_to "Home".html_safe, root_path %></li>
          <li class="hvr-bottom <%= 'active' if current_page?(target_path) %>"><%= link_to "Target".html_safe, target_path %></li>

       # The dropdown menu #
       <li class="dropdown hvr-bottom" style="max-width:300px; width:auto;">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> "Drop-down Menu"</a>
          <ul class="dropdown-menu" role="menu">
              <li><%= link_to "Profile", current_user, html_options = {class: "my-dropdown-item"} %></li>
              <li class="my-dropdown-item"><%= link_to "Edit profile", edit_user_path(current_user) %></li>
          </ul>
       </li>

      </ul>
  </div>
 </div>
</div>

结果是字体显示为白色，而它应该是黑色。在我的 css 文件中，我有：

.my-dropdown-item {
  width: 100%;
  color: #000;
}

使用检查器我可以看到颜色被.top-nav ul li a 的样式所取代（因此my-dropdown-item 指定的字体颜色被划线）。后一种样式存在于 css 文件 file1.css 中，而 .my-dropdown-item 存在于 file2.css 中。在application.css 中，我在*= require file2 行之前有：*= require file1。所以我不明白为什么.top-nav ul li a 推翻.my-dropdown-item。 知道如何找出原因以及如何解决吗？

Answer 1

在 link_to 中添加覆盖类：

  <%= link_to "Edit profile", edit_user_path(current_user), class:"my-dropdown-item" %>

添加到 CSS

.my-dropdown-item {
  a {
  width: 100%;
  color: #000 !important;
  }
}

这可能需要一些调整，让我知道。

Answer 2

我假设您正试图将 <li> 内的链接涂成黑色。

您的问题是.top-nav ul li a 指向一个<a> 元素，而.my-dropdown-item 没有指向这个<a>。

这意味着.my-dropdown-item 中的所有内容都将是黑色的，但是如果您将内容包装到一个新的包装器元素中，它将采用 this 的属性。

为了获得良好的表现，您必须包括 .top-nav .my-dropdown-item a 以及其他上一课。

为了更好的理解，我给你举了一个例子。

.top-nav ul li a {
  color: green
}

.top-nav .my-dropdown-item a{
  width: 100%;
  color: red;
}

<div class="container">
 <div class="header">
  <div class="top-nav">
      <ul class="nav1">
          <li class="hvr-bottom <%= 'active' if current_page?(root_path) %>"><%= link_to "Home".html_safe, root_path %></li>
          <li class="hvr-bottom <%= 'active' if current_page?(target_path) %>"><%= link_to "Target".html_safe, target_path %></li>

       # The dropdown menu #
       <li class="dropdown hvr-bottom" style="max-width:300px; width:auto;">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> "Drop-down Menu"</a>
          <ul class="dropdown-menu" role="menu">
              <li><a>Profile</a></li>
              <li class="my-dropdown-item"><a>Edit Profile</a></li>
          </ul>
       </li>

      </ul>
  </div>
 </div>
</div>