Html 我的定制样式表赢得了'；T重写基础.CSS样式表？_Html_Css_Zurb Foundation

Html 我的定制样式表赢得了'；T重写基础.CSS样式表？

html css zurb-foundation

Html 我的定制样式表赢得了'；T重写基础.CSS样式表？,html,css,zurb-foundation,Html,Css,Zurb Foundation,我有一个问题，因为我不能用我的自定义样式表覆盖我网站上元素的样式。这个问题是因为基础。CSS文件以及标准化。CSS可能。出于某种奇怪的原因，虽然在移动分辨率下，样式确实会覆盖，但这让我完全迷失了方向。例如，在我的自定义样式表（app.css）中，我有以下行： li a{背景色：橙色；} 显然只是为了测试措施。正如上面的代码所示，您应该能够知道任何带有链接的列表都应该具有橙色背景色。当以我的本机分辨率（1920pxx1080px）查看网站时，没有一个显示为橙色背景。你可以看看我解释的内容正如你所

我有一个问题，因为我不能用我的自定义样式表覆盖我网站上元素的样式。这个问题是因为基础。CSS文件以及标准化。CSS可能。出于某种奇怪的原因，虽然在移动分辨率下，样式确实会覆盖，但这让我完全迷失了方向。例如，在我的自定义样式表（app.css）中，我有以下行：

li a{背景色：橙色；}

显然只是为了测试措施。正如上面的代码所示，您应该能够知道任何带有链接的列表都应该具有橙色背景色。当以我的本机分辨率（1920pxx1080px）查看网站时，没有一个显示为橙色背景。你可以看看我解释的内容

正如你所看到的，蓝色按钮显示在其内部的“右按钮活动”是基础。CSS样式表使它成为默认颜色。现在，当我将我的Google Chrome窗口更改为一个薄窗口，并查看“Right Button Active”（右键活动）按钮时，它实际上会将按钮变成橙色，如下图所示

我已经研究了堆栈溢出中提到的另一个问题： 并试图遵循该解决方案，但在解决我的问题时，这对我无效。让我对自己的情况感到困惑的是，我的样式表将在mobile Dimension窗口上工作，但当我使用本机分辨率并在全屏上显示窗口时，它不会显示为我在自定义样式表中设置的样式

下面是my 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;}

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

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

如果您的

foundation.css

对您试图更改的内容有更具体的规则，则它们可以覆盖在

app.css

中完成的代码。尝试这一点的一种方法是将

！重要信息

在CSS语句的末尾，在

之前
在这种情况下，如果这改变了某些内容，您应该通过浏览器的检查器检查您的网站，以了解它是如何设置样式的，以及哪些内容覆盖了哪些内容
有关加载顺序和规则优先级的更多信息，请参阅。正确的选择器
您需要更具体的选择器，以使其像您需要的那样工作
更好的方法是在基金会的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 */
}

注意：您不需要使用！重要信息
如果在基金会的样式文件之后包含app.css
样式文件。这是该关键字的用法之一

注意：如果你没有使用正确的选择器，那么你就要冒险，因为其他一些东西也会改变颜色，这不应该是正确的行为。但是，如果你想把蓝色改为橙色，你应该使用SCSS的基础分布，改变<代码> $PROCEDION/<代码>变量，然后编译你自己的CSS。
如何找到合适的选择器
您需要一些web开发工具，例如，它适用于所有现代浏览器。然后按如下所述使用：

选择检查元件工具
单击要检查的图元
搜索要更改的属性-在您的情况下，您正在查找属性背景色
。然后，您可以看到选择器，还可以在Firebug工具中重新定义颜色以立即查看结果
不幸的是，情况并非如此。我开发的css是app.css文件。你能提供一些更可行的代码吗？目前，如果看不到代码的运行，就没有很多工作要做。您所提供的只是一个指向图像的链接。当然，很抱歉。此外，我不能通过codepen.io或JSFiddle这样的编码平台添加任何类型的代码，因为没有外部链接将样式表链接到站点。取而代之的是，我刚刚推出了我目前所使用的代码——也许你可以使用Google Chrome开发者工具来查看代码？@Jamie Clark是一个可定制的CSS文件，它使浏览器呈现的所有元素更加一致并符合现代标准。现在我更新了我的答案，因为我更好地理解了这个问题。我认为问题不在于它是移动的还是全宽的，而在于元素是对齐的还是堆叠的。当宽度减小时，元素移动到一个新的位置-可能在该位置较低元素的背景不会被行上另一个元素的背景覆盖。尝试在每个元素之间放置一个换行符，看看这会如何影响样式。这与加载顺序或无关！重要的
关键字-他只需要一个合适的选择器。这很有效，非常感谢！你是怎么得到那个特定的选择器的？如果我要亲自设计这些按钮，我会使用.top bar section li.active a
或类似的简单方法，但显然使用这些方法是行不通的。只是问我如何才能知道如何获得这些更具体的选择器@Codi Bezouka Smith我在回答中添加了如何找到合适的选择器的信息。我感谢您的帮助-谢谢！）@科迪·贝祖卡·史密斯没问题，很高兴我能帮上忙。：）