【问题标题】：My custom stylesheet won't override the foundation.css stylesheet?我的自定义样式表不会覆盖foundation.css 样式表？
【发布时间】：2016-02-12 07:49:39
【问题描述】：

我遇到了一个问题，因为我无法使用自定义样式表覆盖网站上元素的样式。问题是由于 foundation.css 文件以及 normalize.css 可能。出于某种奇怪的原因，尽管样式确实会在 mobile 分辨率 中覆盖，这让我完全迷失了方向。例如，在我的自定义样式表 (app.css) 中，我有以下行：

li a {background-color: orange;}

显然只是为了测试措施。正如上面的代码所示，您应该能够知道任何带有链接的列表都应该具有橙色背景色。当以我的原始分辨率 (1920px x 1080px) 查看网站时，它们都没有以橙色背景显示。您可以查看image 我已解释的内容。

正如您所见，蓝色按钮显示为“右键激活”，它是 foundation.css 样式表的默认颜色。现在，当我将 Google Chrome 窗口更改为薄窗口并查看 "Right Button Active" 按钮时，它实际上会变成按钮 orange，正如您在关注picture。

我查看了 堆栈溢出中提到的另一个问题： How do I get my @import stylesheet to override the main stylesheet? 并尝试遵循该解决方案，但这对我解决我的问题没有用。让我对自己的情况感到困惑的是，我的样式表可以在移动尺寸窗口上工作，但是当我处于本机分辨率并且窗口以全屏显示时，它不会像我一样显示它在我的自定义样式表中设置样式。

这是我的 head.php 文件，向您展示我的样式表是如何排序和/或排列的：

<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation example</title>
    <link rel="stylesheet" href="foundation/css/normalize.css">
    <link rel="stylesheet" href="foundation/css/foundation.css">
    <link rel="stylesheet" href="includes/app.css">
    <script src="foundation/js/vendor/modernizr.js"></script>
  </head>
  <?php
    include 'header.php';
  ?>

有什么想法吗？

【问题讨论】：

我认为问题不在于它是移动的还是全宽的，而在于元素是对齐还是堆叠。当宽度减小时，元素会移动到一个新位置——可能较低的背景不会被行上另一个元素的背景覆盖。尝试在每个元素之间放置一个换行符，看看它对样式的影响。

标签： html css zurb-foundation

【解决方案1】：

正确的选择器

您需要更具体的选择器才能使其按您的需要工作。

更好的方法是在 Foundation 的 settings.scss 文件中设置变量。但是，在这种情况下需要 SCSS 编译，如果您不想这样做（或者如果您根本不能），这些行就足够了：

.top-bar-section li.active:not(.has-form) a:not(.button) {
  background-color: #FFA500; /* orange color */
}

.top-bar-section li.active:not(.has-form) a:hover:not(.button) {
  background-color: #F09600; /* darker orange, lightness -6% is Foundation's default */
}

注意：如果您在 Foundation 文件之后包含 app.css 样式文件，则不需要使用 !important。这个关键字的用法是better to avoid。

CodePen working example

注意：如果你没有使用正确的选择器，那么你会冒险，因为其他一些东西也会改变它们的颜色，这不应该是正确的行为。但是，如果您想将蓝色变为橙色，则应使用 Foundation 的 SCSS 发行版，更改 $primary-color 变量，然后编译您自己的 CSS。

如何找到合适的选择器

您需要一些 Web 开发工具，例如Firebug，适用于所有现代浏览器。然后如下所述使用它：

选择检查元素工具。
单击要检查的元素。
搜索要更改的属性 - 在您的情况下，您正在寻找属性 background-color。然后您可以看到选择器，您还可以在 Firebug 工具中重新定义颜色以立即查看结果。

【讨论】：

这工作非常感谢你！你是如何得到那个特定的选择器的？如果我要亲自设置这些按钮的样式，我会使用.top-bar-section li.active a 或类似的简单方法，但显然使用它不起作用。只是问我如何才能知道如何获得这些更具体的选择器！？
@Codi Bezouka-Smith 我在我的答案中添加了如何找到合适的选择器的信息。
感谢您的帮助 - 谢谢！ :)
@Codi Bezouka-Smith 没问题，很高兴我能帮上忙。 :)

【解决方案2】：

如果您的foundation.css 对您要更改的内容有更具体的规则，它们可能会覆盖您在app.css 中完成的代码。尝试此操作的一种方法是将 !important 放在 CSS 语句的末尾，在行的 ; 之前。

如果情况发生了变化，您应该通过浏览器的检查器检查您的网站，以了解其样式是如何设置的，以及哪些内容会覆盖哪些内容。

有关加载顺序和规则优先级的更多信息，请参阅this question。

【讨论】：

这与加载顺序或!important关键字无关——他只需要一个合适的选择器。

【解决方案3】：

你已经在 app.css 中设置了橙色

ul.dropdown>li>a{background-color: orange !important;}

这只是指向样式的下拉列表，而不是您悬停/单击到达那里的按钮。将此添加到您的 app.css 样式表中，我相信它会修复它。

ul .has-dropdown a:hover {
    background-color: orange;
}

【讨论】：

不幸的是，事实并非如此。我开发的css是app.css文件。
你能提供一些更可行的代码吗？目前，如果没有看到实际的代码，就没有太多工作要做。您提供的只是图片链接。
当然，很抱歉。另外，我不能通过像 codepen.io 或 JSFiddle 这样的编码游乐场添加任何类型的代码，因为没有外部链接可以将样式表链接到站点。相反，我只是将我目前拥有的代码推送到 heartfx.org - 也许您可以使用 Google Chrome 开发人员工具 来查看代码？
@Jamie Clark normalize.css 是一个可自定义的 CSS 文件，它可以让浏览器更一致地呈现所有元素并符合现代标准。
我已经更新了我的答案，因为我更好地理解了这个问题。