我的自定义样式表不会覆盖foundation.css 样式表？
[英]My custom stylesheet won't override the foundation.css stylesheet?
问题描述
我遇到了一个问题，因为我无法使用自定义样式表覆盖我网站上元素的样式。 问题是由于foundation.css文件以及可能的normalize.css 。 出于某种奇怪的原因，尽管样式在移动分辨率下确实会覆盖，这让我完全迷失了方向。 例如，在我的自定义样式表 ( app.css ) 中，我有以下行：
li a {background-color: orange;}
显然只是为了测试措施。 正如上面的代码所示，您应该能够分辨出任何带有链接的列表都应该具有橙色背景色。 当以我的原始分辨率（ 1920px x 1080px ）查看网站时，没有一个显示为橙色背景。 您可以查看我所解释的图像。
正如您所看到的，其中带有“ Right Button Active ”的蓝色按钮是foundation.css样式表的默认颜色。 现在，当我将 Google Chrome 窗口更改为细窗口并查看“Right Button Active”按钮时，它实际上将按钮变为橙色，如下图所示。
我查看了堆栈溢出中提到的另一个问题： 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';
?>
有任何想法吗？
3 个解决方案
解决方案1
1 已采纳 2015-11-11 11:28:09
正确的选择器
您需要更具体的选择器才能使其按照您的需要工作。
更好的方法是在 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 。 最好避免使用此关键字。
注意：如果你没有使用正确的选择器，那么你就会冒一些风险，因为其他一些东西也会改变它们的颜色，这不应该是正确的行为。 但是，如果您想将蓝色更改为橙色，则您应该使用 Foundation 的 SCSS 发行版，更改$primary-color变量，然后编译您自己的 CSS。
如何找到合适的选择器
您需要一些 Web 开发工具，例如Firebug ，它适用于所有现代浏览器。 然后按如下所述使用它：
- 选择检查元素工具。
- 单击要检查的元素。
- 搜索您想要更改的属性 - 在您的情况下，您正在寻找属性
background-color。 然后您可以看到选择器，您还可以在 Firebug 工具中重新定义颜色以立即查看结果。
解决方案2
0 2015-11-11 08:55:48
你已经在 app.css 中设置了橙色
ul.dropdown>li>a{background-color: orange !important;}
这仅指向样式下拉列表，而不是您悬停/单击以到达那里的按钮。 将此添加到您的 app.css 样式表中，我相信它会修复它。
ul .has-dropdown a:hover {
background-color: orange;
}
解决方案3
0 2015-11-11 09:23:59
如果您的foundation.css对您要更改的内容有更具体的规则，则它们可以覆盖您在app.css完成的代码。 尝试此操作的一种方法是将!important放在 CSS 语句的末尾，在;之前; 行的。
如果这改变了某些内容，您应该通过浏览器的检查器检查您的网站，以确定它的样式以及什么覆盖了什么。
有关加载顺序和规则优先级的更多信息，请参阅此问题。
用我的自定义CSS问题覆盖Foundation.css
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.