我正在尝试设置一个通用导航栏。我正在使用include将menu.php导入index.php。当我这样做时，它工作正常;但是，当我在包含menu.php之后添加内容时，菜单的 CSS 规则会继续。
索引.php
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Home | Website</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test</p>
</body>
</html>
菜单.php
<head>
<title>Menu | Website</title>
<style>
// menu-only styles...
</style>
</head>
<body>
<a href="/">Home</a>
</body>
<?php return; ?>
你本质上是在按照自己的方式在HTML页面中包含HTML页面。
要让你的CSS只针对你的菜单，把它保留在你的style.css文件中，但让你的div有一个"菜单"类。
我相信，像这样的东西应该能满足你的需求。
索引.html
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Dare Network | Home</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test</p>
</body>
</html>
风格.css
html,body {
padding: 0;
margin: 0;
background-color: #777777;
}
.menu {
/* padding: top&&bottom left&&right; */
padding:10px 0;
background-color: #7786ff;
text-align: center;
}
.menu a {
/* merge transitions into one line to make both functional */
transition: background-color .25s ease-in-out, padding-bottom .25s ease-in-out;
background-color: #b20000;
color: #ffffff;
text-decoration: none;
/* padding:top right bottom left */
padding:10px 10px 5px 10px;
}
.menu a:hover {
background-color: #cc0000;
padding-bottom: 10px;
}
菜单.php
<div class="menu">
<a href="/">Home</a>
</div>
这不是 PHP 问题
你在菜单中的CSS.php在DOM中比你的实际样式表晚，因此被覆盖。 要么用一些包含元素限定菜单.php样式的范围，要么将菜单CSS代码放在DOM的前面（就像在style.css之前一样）
你几乎更接近你的编码。一个HTML页面只能有一个html，head，title，body标签。
只需从菜单中删除这些html，head，title，body标签即可.php
索引.html
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Dare Network | Home</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test
</body>
</html>
风格.css
html,body {
padding: 0;
margin: 0;
background-color: #777777;
}
菜单.php
<style>
body {
padding-top: 10px;
padding-bottom: 10px;
background-color: #7786ff;
text-align: center;
}
a {
transition: background-color .25s ease-in-out;
transition: padding-bottom .25s ease-in-out;
background-color: #b20000;
color: #ffffff;
text-decoration: none;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
a:hover {
background-color: #cc0000;
padding-bottom: 10px;
}
</style>
<a href="/">Home</a>
<?php return; ?>