使用 PHP 包含 for <head> 来提供 CSS 会给出混合结果

我想为该部分使用PHP。我有一个index.php和一个head.html，其中我有通常的内容：title等，以及bootstrap cdn的链接和自定义CSS文件。

测试后，Bootstrap的样式工作正常，但我的自定义覆盖效果不是。我的印象是自定义CSS文件会自动覆盖引导程序？过去，这对我来说很适合我，传统上在网站的每一页上链接到它们。但是，我想使用PHP包括节省时间。

我已经玩过事情的顺序（即，首先是引导程序，首先是自定义CSS等），我尝试了分别链接到自定义CSS文件（Incluply include），但无法弄清楚。p>有什么想法？

我的代码下面：

index.php

<!DOCTYPE html>
<html>
<head>
    <?php include("includes/head.html");?>
</head>
<body>
<div class="jumbotron paral paralsec">
    <h1 class="hero-heading display-3 text-dark">Some text.</h1>
</div>
</body>
</html>

head.html

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Site Title</title>
<!-- Bootstrap CDN below -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Custom CSS below -->
<link rel="stylesheet" type="text/css" href="CSS/customCSS.css">
<!-- Font Awesome below -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
<!-- Google Fonts below -->
<link rel="stylesheet" type="text/css" href="#">

customcss.css（仅包含一种用于测试的H1样式）

h1 {color: white}

文件夹结构：

CSS (Folder)
    customCSS.css
includes (Folder)
    head.html
index.php

css文件的订购扮演的角色不如大多数人想象的。

当有多个针对同一件事的规则时，特异性是最重要的因素。更高的特异性几乎总是会获胜。

当选择器具有相等的特异性值时，最新规则（最后一个调用）是通常应用的规则。

这里还有很多有关此主题的信息：https：//www.smashingmagazine.com/2007/07/css-pecificity-things-things-things-you-houb-should-know/

感谢您的建议。

事实证明，我正在遇到CSS缓存问题。我的浏览器正在自动加载CSS文件的过时版本。PHP包括和CSS链接正常工作。

如果其他任何其他线程正在寻找解决方案，请参见此处：https://css-tricks.com/can-we-prevent-css-caching/

再次感谢汤姆

相关内容

最新更新

热门标签：