正确选择器

Question

我遇到了一个问题，因为我无法使用自定义样式表覆盖网站上元素的样式。问题是因为 foundation.css 文件以及 normalize.css 可能。出于某种奇怪的原因，虽然样式在移动分辨率中完全覆盖，但我完全丢失了。例如，在我的自定义样式表（ app.css ）中，我有以下行：

li a {background-color: orange;}

显然是为了测试措施。在显示上面的代码时，您应该能够告诉任何带链接的列表应该具有橙色背景颜色。以我的原始分辨率（ 1920px x 1080px ）查看网站时，没有一个以橙色背景显示。您可以查看我所解释的image。

正如您所看到的，其中带有“右键激活”的蓝色按钮是 foundation.css 样式表制作的默认颜色。现在，当我将Google Chrome浏览器窗口更改为精简窗口并查看“右键激活”按钮时，它实际上会将按钮橙色打开，如您所见关注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';
  ?>

有什么想法吗？

Answer 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之后包含!important样式文件，则不需要使用app.css。此关键字的使用时间为better to avoid。

CodePen working example

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

如何查找适当的选择器

您需要一些网络开发工具，例如Firebug，适用于所有现代浏览器。然后按照以下说明使用它：

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

Answer 2

您已在app.css

中设置了橙色

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

这仅指向样式的下拉列表，而不是指针悬停/单击的按钮。将其添加到app.css样式表中，我相信它会解决它。

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

Answer 3

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

如果这种情况发生了变化，您应该通过浏览器的检查员检查您的网站，以便了解它的样式以及覆盖的内容。

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

我的自定义样式表不会覆盖foundation.css样式表吗？

3 个答案:

正确选择器

如何查找适当的选择器