CSS如何使html文件和包含文件的主體不合並？

Question

從我的試驗和錯誤中看到的是，當我（使用php）包含另一個php文件時，主體基本上合並了。

我有一個CSS文件，該文件以“ main”類影響主文件主體。 CSS文件還通過“ nav”類影響包含的文件主體。

看來，每個文件的兩個主體都受到針對每個類的兩種樣式的影響（即使每個body標簽上的類都不相同）。

我錯了嗎？ 如果沒有，有沒有辦法可以解決這個問題？ 謝謝！

包含的導航文件（包括css文件（我僅顯示與主體相關的代碼）：

<body class="nav">
<ul class="navbar">
<li>
    <form action="login.php" method="post">
        <input id="email" type="text" name="email" placeholder="Email">
        <input id="password" type="password" name="password" placeholder="Password">
        <input type="submit" value="Login">
    </form>
</li>

包含nav文件的主索引文件：

<body class='index'>

<div class="block-signUp">
    <h1>Sign Up</h1>

    <form action="" method="post">
        <input class="firstname" type="text" name="firstname" placeholder="First Name"
               value="<?php echo($_POST['firstname']) ?>">
        <input class="lastname" type="text" name="lastname" placeholder="Last Name"
               value="<?php echo($_POST['lastname']) ?>"> <br>
        <input class="email" type="text" name="email" placeholder="Email"
               value="<?php echo($_POST['email']) ?>"><br>
        <input class="password" type="password" name="password" placeholder="Password"
               value="<?php echo($_POST['password']) ?>"><br>

        <div class="error-message hidden"></div>
        <input type="submit" value="Sign Up"><br>

    </form>
    <div><a href="login.php">Already Have An Account?</a></div>
</div>

</body>

整個網站上唯一的CSS文件，其中nav文件包含：

body.nav { /* This code effects the body in the index file as well for some reason */
        margin-top: 150px; /* Make nav bar at top of screen */
}

Answer 1

如果在包含文件中聲明了CSS，並且樣式未專門限定於該頁面上的元素，則可能會發生沖突。 如果您要設置基本標簽（如body，span，div，table等）的樣式，則可能會發生這種情況。

在瀏覽器中編譯頁面時，所有內容都將被扔在一起。 長話短說。 根據CSS落入代碼的順序，它可能會被覆蓋。 同樣，根據樣式的特殊性（實詞），它可能會再次被覆蓋。

這可能會有所幫助。

CSS特異性計算器

確保您的main和nav類不在兩個頁面上，尤其不要在兩個頁面上都設置樣式

我看到有人做的另一件事是MVC（模型視圖控制器）的新功能，它調用部分頁面是因為它們在不需要時被調用的頁面中包含HTML和BODY標簽。

Answer 2

不正確 首先， include和require是將腳本從一個文件注入__FILE__ （主文件，在.htaccess / URL中打開的文件），例如：

file1.php

<?php
    $first_script_var = true;
    include 'file2.php';
?>

file2.php

<?php
    if(isset($first_script_var) && $first_script_var === true){
        echo 'True';
    }
?>

現在，file1.php將如下所示：

<?php
    $first_script_var = true;
    include 'file2.php';
?>
<?php
    if(isset($first_script_var) && $first_script_var === true){
        echo 'True';
    }
?>
But if you would be using AJAX requests to the HTML DOM Element you would be requesting a file to the `html` tag it would load in the body tags.

例：
<file1.php

<html>
    <head>
        <title>Hello world</title>
        <script src="jquery.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function(){
                $.ajaxSetup({cache:false});
            });
            function load(){
                $("html").load("file2.php?string=" + document.getElementById("str").value); // $("html") is a selected, it basicly means we have selected the html tag. and the .load(); is a function from JQuery.
            }
        </script>
        <div>
            <input type="text" id="str" placeholder="Echo 'text'" />
            <br />
            <input type="button" onclick="load();" />
        </div>
    </body>
</html>

file2.php

<head>
    <title>New title</title>
</head>
<body>
    <?php
        if(isset($_GET['string'])){ echo $_GET['string']; }
    ?>
</body>

這將導致用新的頭部和新的主體標簽替換舊的標頭和舊的主體標簽，請記住！ 舊的javascript函數仍然會被記住。

CSS如何使html文件和包含文件的主體不合並？

問題描述

2 個解決方案

解決方案1
1 2016-10-17 03:50:51

解決方案2
1 已采納

CSS如何使html文件和包含文件的主體不合並？

問題描述

2 個解決方案

解決方案1 1 2016-10-17 03:50:51

解決方案2 1 已采納

解決方案1
1 2016-10-17 03:50:51

解決方案2
1 已采納