我的自定义样式表不会覆盖 foundation.css 样式表？
My custom stylesheet won't override the foundation.css stylesheet?
我遇到了一个问题，因为我无法使用我的自定义样式表覆盖我网站上元素的样式。问题是因为 foundation.css 文件以及 normalize.css 可能。出于某种奇怪的原因，尽管在 移动分辨率 中样式确实会覆盖，但我完全迷失了。例如，在我的自定义样式表 (app.css) 中，我有以下行：
li a {background-color: orange;}
显然只是为了测试措施。如上面的代码所示，您应该能够分辨出任何带有 link 的列表都应该具有 橙色背景色 。当以我的原始分辨率（1920px x 1080px）查看网站时，其中 none 显示为橙色背景。您可以查看我所解释内容的 image。
如您所见，蓝色按钮中显示的“右按钮激活”是foundation.css[=的默认颜色44=] 样式表做到了。现在，当我将 Google Chrome window 更改为细 window 并查看 "Right Button Active" 按钮时正如您在下面的 picture.
中看到的那样，它实际上将按钮变为 orange
我查看了 stack overflow 中提到的另一个问题： How do I get my @import stylesheet to override the main stylesheet?
并尝试遵循该解决方案，但这对我解决问题没有用。让我对我的情况感到困惑的是，我的样式表将在移动维度 window 上工作，但是当我处于我的原始分辨率并且 window 在全屏上显示时，它 确实not 显示为我在自定义样式表中设置的样式。
这是我的 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';
?>
有什么想法吗？
您已在此处设置橙色 app.css
ul.dropdown>li>a{background-color: orange !important;}
这仅指向样式下拉列表，而不是您 hover/click 到达那里的按钮。将此添加到您的 app.css 样式 sheet，我相信它会修复它。
ul .has-dropdown a:hover {
background-color: orange;
}
如果您的 foundation.css 对您尝试更改的内容有更具体的规则，它们可能会覆盖您在 app.css 中完成的代码。尝试此操作的一种方法是将 !important 放在 CSS 语句的末尾，在行的 ; 之前。
万一这改变了某些东西，您应该通过浏览器的检查器检查您的网站，以便弄清楚它的样式是如何设置的以及什么会覆盖什么。
有关加载顺序和规则优先级的更多信息，请参阅this question。
正确的Select或
您需要更具体的选择器才能使其按照您的需要工作。
更好的方法是在 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。
注意：如果您没有使用正确的选择器，那么您会冒着风险，因为其他一些东西也会改变它们的颜色，这不应该是正确的行为。但是，如果您想将蓝色更改为橙色，通常您应该使用 Foundation 的 SCSS 发行版，更改 $primary-color 变量，然后编译您自己的 CSS.
如何找到合适的Select或
您需要一些网络开发工具，例如Firebug，适用于所有现代浏览器。然后按如下所述使用它：
- Select 检查元素工具。
- 单击要检查的元素。
- 搜索您要更改的属性 - 在您的例子中，您正在寻找属性
background-color。然后您可以看到选择器，您还可以在 Firebug 工具中重新定义颜色以立即查看结果。
我遇到了一个问题，因为我无法使用我的自定义样式表覆盖我网站上元素的样式。问题是因为 foundation.css 文件以及 normalize.css 可能。出于某种奇怪的原因，尽管在 移动分辨率 中样式确实会覆盖，但我完全迷失了。例如，在我的自定义样式表 (app.css) 中，我有以下行：
li a {background-color: orange;}
显然只是为了测试措施。如上面的代码所示，您应该能够分辨出任何带有 link 的列表都应该具有 橙色背景色 。当以我的原始分辨率（1920px x 1080px）查看网站时，其中 none 显示为橙色背景。您可以查看我所解释内容的 image。
如您所见，蓝色按钮中显示的“右按钮激活”是foundation.css[=的默认颜色44=] 样式表做到了。现在，当我将 Google Chrome window 更改为细 window 并查看 "Right Button Active" 按钮时正如您在下面的 picture.
中看到的那样，它实际上将按钮变为 orange
我查看了 stack overflow 中提到的另一个问题： How do I get my @import stylesheet to override the main stylesheet? 并尝试遵循该解决方案，但这对我解决问题没有用。让我对我的情况感到困惑的是，我的样式表将在移动维度 window 上工作，但是当我处于我的原始分辨率并且 window 在全屏上显示时，它 确实not 显示为我在自定义样式表中设置的样式。
这是我的 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';
?>
有什么想法吗？
您已在此处设置橙色 app.css
ul.dropdown>li>a{background-color: orange !important;}
这仅指向样式下拉列表，而不是您 hover/click 到达那里的按钮。将此添加到您的 app.css 样式 sheet，我相信它会修复它。
ul .has-dropdown a:hover {
background-color: orange;
}
如果您的 foundation.css 对您尝试更改的内容有更具体的规则，它们可能会覆盖您在 app.css 中完成的代码。尝试此操作的一种方法是将 !important 放在 CSS 语句的末尾，在行的 ; 之前。
万一这改变了某些东西，您应该通过浏览器的检查器检查您的网站，以便弄清楚它的样式是如何设置的以及什么会覆盖什么。
有关加载顺序和规则优先级的更多信息，请参阅this question。
正确的Select或
您需要更具体的选择器才能使其按照您的需要工作。
更好的方法是在 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。
注意：如果您没有使用正确的选择器，那么您会冒着风险，因为其他一些东西也会改变它们的颜色，这不应该是正确的行为。但是，如果您想将蓝色更改为橙色，通常您应该使用 Foundation 的 SCSS 发行版，更改 $primary-color 变量，然后编译您自己的 CSS.
如何找到合适的Select或
您需要一些网络开发工具，例如Firebug，适用于所有现代浏览器。然后按如下所述使用它：
- Select 检查元素工具。
- 单击要检查的元素。
- 搜索您要更改的属性 - 在您的例子中，您正在寻找属性
background-color。然后您可以看到选择器，您还可以在 Firebug 工具中重新定义颜色以立即查看结果。