Question

我无法将基金会网站的顶栏部分更改为其他颜色。

我为此创建了一个自定义style.css。

我可以更改大部分顶栏颜色，但不能更改右侧下拉列表侧（我没有左侧列表）。单击下拉列表上的链接会更改导航栏的颜色，但顶部的导航栏组件除此之外不会更改（希望这有意义吗？）...

这是基本的HTML：

<section class="top-bar-section">
        <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Sections</a>
          <ul class="dropdown">
            <li><a href="about.html">####</a></li>
            <li class="divider"></li>
            <li><a href="philosophy.html">####</a></li>
            <li class="divider"></li>
            <li><a href="beginning.html">####</a></li>
            <li class="divider"></li>
            <li><a href="#">#####</a></li>
            <li class="divider"></li>
         </ul>
        </li>

        <li class="has-dropdown">
          <a href="#">Links</a>
          <ul class="dropdown">
            <li><a href="#" target="new">####</a></li>
            <li class="divider"></li>
            <li><a href="#" target="new">####</a></li>
            <li class="divider"></li>
            <li><a href="#" target="new">####</a></li>
            <li class="divider"></li>
         </ul>
        </li>

      </ul>
    </section>

这是我尝试使用style.css更改它：

@charset "UTF-8";

.top-bar {
    background-color: #2D4DC7;
}


.top-bar-section ul {
    background-color: #2D4DC7;
}

.top-bar-section ul.right {
    background-color: #2D4DC7;
}


.top-bar-section li a:not(.button) {
    background-color: #2D4DC7;
}


.top-bar-section ul li.active > a {
   background-color: #2D4DC7;

/** Changes the hover state of non active menu items **/
.top-bar-section li:hover a {
    background-color: #2D4DC7;
}


.top-bar-section ul li > a {
    background-color: #2D4DC7;
}


.top-bar-section ul.dropdown li a:hover:not(.button) {
     background-color: #2D4DC7;
}


.top-bar-section ul.dropdown {
    background-color: #2D4DC7;
}


.top-bar-section .has-dropdown > a:after {
    background-color: #2D4DC7;
}

我很确定这只是我遇到问题的语法。与“对”有关的事情＆＃39;我觉得上课了吗？

请帮忙吗？

非常感谢

Answer 1

我强烈建议你使用安装了Firebug的浏览器，例如Firefox。

加载任何页面，点击工具＆gt; Web开发人员＆gt; Inspector（或其等效的热键），然后单击您的对象，HTML代码检查器将引用控制正在生成的样式的css文件的确切行（直接样式或计算样式）。

时间和理智的保护。

Answer 2

经过多次尝试和Zurb的一些帮助支持我需要的CSS是：

.top-bar-section .dropdown li:not(.has-form) a:not(.button) {
      color: white;
      background: #740707;
}

感谢您的帮助

Answer 3

如果您使用SCSS / SASS版本的基础，则应更改顶部栏的默认值。

默认设置存储在_settings.scss。

中

例如，要将其更改为cornflowerblue，我使用了以下设置：

$topbar-bg-color: cornflowerblue;
$topbar-bg: $topbar-bg-color;
$topbar-link-bg-hover: scale-color($topbar-bg, $lightness: -14%);
$topbar-link-bg-active: $topbar-bg;
$topbar-dropdown-bg: $topbar-bg;
$topbar-dropdown-link-bg: $topbar-bg;
$topbar-dropdown-link-bg-hover: scale-color($topbar-bg, $lightness: -14%);

Zurb Foundation改变顶杆颜色

3 个答案: