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

Codi Bezouka-Smith 发表于 Dev

科迪·贝佐卡·史密斯（Codi Bezouka-Smith）

我遇到了一个问题，因为我无法使用自定义样式表覆盖网站上元素的样式。问题可能是由于Foundation.css文件以及normalize.css引起的。尽管出于某种奇怪的原因，这些样式在处于移动分辨率时会被覆盖，这让我完全迷失了。例如，在我的自定义样式表（app.css）中，有以下行：

li a {background-color: orange;}

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

如您所见，蓝色按钮内部显示为“ Right Button Active ”，它是Foundation.css样式表使之成为默认颜色。现在，当我将Google Chrome浏览器窗口更改为薄窗口并查看“活动的右键”按钮时，实际上它变成了橙色按钮，如下图所示。

我查看了堆栈溢出中 提到的另一个问题：如何获取@import样式表以覆盖主样式表？并尝试采用该解决方案，但这对我解决我的问题没有用。使我感到困惑的是，我的样式表可以在移动Dimion窗口上工作，但是当我处于本机分辨率并以全屏显示该窗口时，它不会显示，因为我在自定义样式表中对其进行了样式设置。

这是我的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';
  ?>

有任何想法吗？

核仁

适当的选择器

您需要更具体的选择器以使其按需工作。

更好的方法是在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 */
}

注意：!important如果app.css在Foundation的样式文件之后添加样式文件，则不需要使用。这是更好地避免这个关键字的使用。

CodePen工作示例

注意：如果您没有使用正确的选择器，那么您可能会冒险，因为其他一些东西也会改变其颜色，这不应该是正确的行为。但是，如果通常要将蓝色更改为橙色，则应使用Foundation的SCSS发行版，更改$primary-color变量，然后编译自己的CSS。

如何找到合适的选择器

您需要一些Web开发工具，例如Firebug，所有现代浏览器都可以使用。然后按如下所述使用它：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-23

我来说两句

0条评论

登录后参与评论

上一篇：Android Studio Gradle androidTest与InstrumentTest

来自分类Dev

Related 相关文章

文章