gpt4 book ai didi

html - 我的自定义样式表不会覆盖 foundation.css 样式表?

转载 作者:行者123 更新时间:2023-11-28 01:21:52 26 4
gpt4 key购买 nike

我遇到了一个问题,因为我无法使用我的自定义样式表覆盖我网站上元素的样式。问题是因为 foundation.css 文件以及 normalize.css 可能。出于某种奇怪的原因,尽管在 移动分辨率 中样式确实会覆盖,但我完全迷失了。例如,在我的自定义样式表 (app.css) 中,我有以下行:

li {background-color: orange;}

显然只是为了测试措施。正如上面的代码所示,您应该能够分辨出任何带有链接的列表都应该有一个橙色背景色。当以我的原始分辨率 (1920px x 1080px) 查看网站时,它们都没有显示为橙色背景。您可以查看 image我已经解释过了。

如您所见,蓝色按钮内部显示“右键事件”,这是 foundation.css 样式表为其设置的默认颜色。现在,当我将 Google Chrome 窗口更改为薄窗口并查看“Right Button Active” 按钮时,它实际上将按钮变为橙色,如您在以下 picture .

我查看了stack overflow:中提到的另一个问题: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';
?>

有什么想法吗?

最佳答案

正确的选择器

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

更好的方法是在 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。是better to avoid此关键字的使用情况。

CodePen working example

注意:如果您没有使用正确的选择器,那么您就冒着风险,因为其他一些东西也会改变它们的颜色,这不应该是正确的行为。但是,如果您想将蓝色更改为橙​​色,您应该使用 Foundation 的 SCSS 发行版,更改 $primary-color 变量,然后编译您自己的 CSS。

如何找到合适的选择器

您需要一些网络开发工具,例如Firebug ,适用于所有现代浏览器。然后按如下所述使用它:

enter image description here

  1. 选择检查元素工具。
  2. 单击要检查的元素。
  3. 搜索您要更改的属性 - 在您的例子中,您正在寻找属性 background-color。然后您可以看到选择器,还可以在 Firebug 工具中重新定义颜色以立即查看结果。

关于html - 我的自定义样式表不会覆盖 foundation.css 样式表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33646857/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com