PHP引入文件无法加载CSS样式的问题排查

Hey there, let's break down why your .menuitem styles aren't applying to mainmenu.php when it's included in index.php, and how to fix it:

The Core Problem #

Right now, your mainmenu.php is a full standalone HTML document—with its own <!DOCTYPE html>, <html>, <head>, and <body> tags. When you include this file into index.php, the resulting page ends up with duplicate HTML structure tags. Browsers don't handle this well; they'll often ignore or misparse parts of the code, which is why your custom .menuitem styles aren't working (even though some inherited styles might sneak through).

Plus, you don't need to re-link the CSS file in the included menu—index.php already loads styles.css, and that stylesheet applies to the entire page, including any content you include into it.

Step-by-Step Fix #

1. Rewrite mainmenu.php to only contain menu content #

Strip out all the full HTML boilerplate, leaving just the menu elements:

<p class="menuitem">HOME</p>
<p class="menuitem">I KNOW</p>
<p class="menuitem">I WANT</p>
<p class="menuitem">I GOT</p>

This way, when index.php includes this file, the menu paragraphs get inserted directly into the parent page's <body>, using the existing CSS that's already loaded.

2. Double-check your include path #

Looking at your directory structure:

app
│ index.php
│ styles.css
│
└───include
    │ mainmenu.php

Your index.php has <?php include 'includes/menu.php'; ?>—that's a mismatch. Update the include line to point to the correct file:

<?php include 'include/mainmenu.php'; ?>

Verify the Fix #

Refresh index.php in your browser. The .menuitem styles from styles.css should now apply to the menu paragraphs correctly, since they're part of the parent page's valid HTML structure and the CSS is already loaded globally.

内容的提问来源于stack exchange，提问作者Jane Sampson