我的自定義樣式表不會覆蓋foundation.css 樣式表？
[英]My custom stylesheet won't override the foundation.css stylesheet?
問題描述
我遇到了一個問題，因為我無法使用自定義樣式表覆蓋我網站上元素的樣式。 問題是由於foundation.css文件以及可能的normalize.css 。 出於某種奇怪的原因，盡管樣式在移動分辨率下確實會覆蓋，這讓我完全迷失了方向。 例如，在我的自定義樣式表 ( app.css ) 中，我有以下行：
li a {background-color: orange;}
顯然只是為了測試措施。 正如上面的代碼所示，您應該能夠分辨出任何帶有鏈接的列表都應該具有橙色背景色。 當以我的原始分辨率（ 1920px x 1080px ）查看網站時，沒有一個顯示為橙色背景。 您可以查看我所解釋的圖像。
正如您所看到的，其中帶有“ Right Button Active ”的藍色按鈕是foundation.css樣式表的默認顏色。 現在，當我將 Google Chrome 窗口更改為細窗口並查看“Right Button Active”按鈕時，它實際上將按鈕變為橙色，如下圖所示。
我查看了堆棧溢出中提到的另一個問題： 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';
?>
有任何想法嗎？
3 個解決方案
解決方案1
1 已采納 2015-11-11 11:28:09
正確的選擇器
您需要更具體的選擇器才能使其按照您的需要工作。
更好的方法是在 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 。 最好避免使用此關鍵字。
注意：如果你沒有使用正確的選擇器，那么你就會冒一些風險，因為其他一些東西也會改變它們的顏色，這不應該是正確的行為。 但是，如果您想將藍色更改為橙色，則您應該使用 Foundation 的 SCSS 發行版，更改$primary-color變量，然后編譯您自己的 CSS。
如何找到合適的選擇器
您需要一些 Web 開發工具，例如Firebug ，它適用於所有現代瀏覽器。 然后按如下所述使用它：
- 選擇檢查元素工具。
- 單擊要檢查的元素。
- 搜索您想要更改的屬性 - 在您的情況下，您正在尋找屬性
background-color。 然后您可以看到選擇器，您還可以在 Firebug 工具中重新定義顏色以立即查看結果。
解決方案2
0 2015-11-11 08:55:48
你已經在 app.css 中設置了橙色
ul.dropdown>li>a{background-color: orange !important;}
這僅指向樣式下拉列表，而不是您懸停/單擊以到達那里的按鈕。 將此添加到您的 app.css 樣式表中，我相信它會修復它。
ul .has-dropdown a:hover {
background-color: orange;
}
解決方案3
0 2015-11-11 09:23:59
如果您的foundation.css對您要更改的內容有更具體的規則，則它們可以覆蓋您在app.css完成的代碼。 嘗試此操作的一種方法是將!important放在 CSS 語句的末尾，在;之前; 行的。
如果這改變了某些內容，您應該通過瀏覽器的檢查器檢查您的網站，以確定它的樣式以及什么覆蓋了什么。
有關加載順序和規則優先級的更多信息，請參閱此問題。
用我的自定義CSS問題覆蓋Foundation.css
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.