我的自定义样式表不会覆盖foundation.css 样式表？
[英]My custom stylesheet won't override the foundation.css stylesheet?
问题描述
I am having an issue as I cannot override the styles of the elements on my website with my custom stylesheet.
我遇到了一个问题，因为我无法使用自定义样式表覆盖我网站上元素的样式。 The issue is because of the foundation.css file as well as the normalize.css possibly.问题是由于foundation.css文件以及可能的normalize.css 。 For some odd reason though the styles do override while being in a mobile resolution which has me completely lost.出于某种奇怪的原因，尽管样式在移动分辨率下确实会覆盖，这让我完全迷失了方向。 For example in my custom stylesheet ( app.css ) I have the following line:例如，在我的自定义样式表 ( app.css ) 中，我有以下行：
li a {background-color: orange;}
Just for testing measures obviously.显然只是为了测试措施。 As the code above is shown you should be able to tell that any list with a link should have an orange background color .正如上面的代码所示，您应该能够分辨出任何带有链接的列表都应该具有橙色背景色。 When viewing the website in my native resolution ( 1920px x 1080px ) none of them are shown with an orange background.当以我的原始分辨率（ 1920px x 1080px ）查看网站时，没有一个显示为橙色背景。 You can view an image of what I have explained.您可以查看我所解释的图像。
As you can see the blue button shown with " Right Button Active " inside of it is the default color that the foundation.css stylesheet makes it.正如您所看到的，其中带有“ Right Button Active ”的蓝色按钮是foundation.css样式表的默认颜色。 Now when I change my Google Chrome window to a thin window and take a look at the "Right Button Active" button it actually turns the button orange as you can see at the following picture .现在，当我将 Google Chrome 窗口更改为细窗口并查看“Right Button Active”按钮时，它实际上将按钮变为橙色，如下图所示。
I have looked at the other question mentioned on stack overflow: How do I get my @import stylesheet to override the main stylesheet?我查看了堆栈溢出中提到的另一个问题： How do I get my @import stylesheet to override the main stylesheet? and tried to follow that solution but that didn't work for me in solving my issue.并试图遵循该解决方案，但这对我解决我的问题不起作用。 What makes me confused about my situation is the fact that my stylesheet will work on the mobile dimesion window but when I am in my native resolution and have the window showing on fullscreen it does not show up as I have it styled in my custom stylesheet.让我对我的情况感到困惑的是，我的样式表可以在移动尺寸窗口上工作，但是当我使用本机分辨率并在全屏上显示窗口时，它不会像我在自定义样式表中设置的那样显示。
Here is my head.php file to show you how my stylesheets are sorted and / or arranged:这是我的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';
?>
Any ideas?有任何想法吗？
3 个解决方案
解决方案1
1 已采纳 2015-11-11 11:28:09
The Proper Selector正确的选择器
You need more specific selector to make it work like you need.您需要更具体的选择器才能使其按照您的需要工作。
The better way is to set up variables in Foundation's settings.scss file.更好的方法是在 Foundation 的settings.scss文件中设置变量。 However, SCSS compilation is needed in this case and if you don't want to do it (or if you simply can't) these lines will be enough:但是，在这种情况下需要 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 */
}
Note: You don't need using !important if you include app.css style file after the Foundation's one.注意：如果在 Foundation 的样式文件之后包含app.css样式文件，则不需要使用!important 。 It is better to avoid of usage of this keyword.最好避免使用此关键字。
CodePen working example CodePen 工作示例
Note: If you don't use the proper selector then you take a risk than some other stuff change their color too which shouldn't be the correct behaviour.注意：如果你没有使用正确的选择器，那么你就会冒一些风险，因为其他一些东西也会改变它们的颜色，这不应该是正确的行为。 However, if you want to change blue color to the orange one in general you should use SCSS distribution of Foundation, change $primary-color variable and then compile your own CSS.但是，如果您想将蓝色更改为橙色，则您应该使用 Foundation 的 SCSS 发行版，更改$primary-color变量，然后编译您自己的 CSS。
How To Find Proper Selector如何找到合适的选择器
You need some web development tool, eg Firebug , which is abailable for all modern browsers.您需要一些 Web 开发工具，例如Firebug ，它适用于所有现代浏览器。 Then use it as is described below:然后按如下所述使用它：
- Select inspect element tool.选择检查元素工具。
- Click on the element which you want to inspect.单击要检查的元素。
- Search for the attribute which you want to change - in your case, you are looking for attribute
background-color.搜索您想要更改的属性 - 在您的情况下，您正在寻找属性background-color。 Then you can see the selector and you are also able to redefine color in the Firebug tool in place to see results immediately.然后您可以看到选择器，您还可以在 Firebug 工具中重新定义颜色以立即查看结果。
解决方案2
0 2015-11-11 08:55:48
You have set the orange colour here in app.css你已经在 app.css 中设置了橙色
ul.dropdown>li>a{background-color: orange !important;}
This is only pointing to the drop down list for styling, not the button you hover/click to get there.这仅指向样式下拉列表，而不是您悬停/单击以到达那里的按钮。 Add this to your app.css style sheet and I am confident it will fix it.将此添加到您的 app.css 样式表中，我相信它会修复它。
ul .has-dropdown a:hover {
background-color: orange;
}
解决方案3
0 2015-11-11 09:23:59
If your foundation.css has more specific rules to what you are trying to change, they could override your code done in app.css .如果您的foundation.css对您要更改的内容有更具体的规则，则它们可以覆盖您在app.css完成的代码。 One way to try this is to put the !important at the end of your CSS-statement, before the ;尝试此操作的一种方法是将!important放在 CSS 语句的末尾，在;之前; of the row.行的。
In a case if that changes something, you should inspect your website via your browser's inspector in order to figure how it is being styled and what overrides what.如果这改变了某些内容，您应该通过浏览器的检查器检查您的网站，以确定它的样式以及什么覆盖了什么。
Please refer to this question for more information about load order and rule priorities.有关加载顺序和规则优先级的更多信息，请参阅此问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.