Question

www.geo-village.com＆lt; - 实例

好吧，我有我的主要网页的CSS和PHP文件。我还包括一个单独的PHP和CSS文件中的导航栏。我为导航栏项添加了边框。为什么登录和注册按钮会受到影响？登录和注册按钮位于主html文件中，并且没有#navbar的id，这就是为什么我感到困惑。

主要HTML文件

<?php
    session_start();
?>
<!DOCTYPE html>
<html>
    <head>
        <title>GeoVillage - A Community</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id=header>
            <img id=logo src="/image/header.png" alt="GeoVillage Community" style="width:500px;height:64px;">
            <span id=logreg>
                <?php
                    if(isset($_SESSION['loggedon']) && $_SESSION['loggedon'] == true){
                        echo '<a href=/logout>
                            <img id=logout src="/image/logout.png" alt="Logout">
                            </a>';
                        if ($_SESSION['adminsts'] == admin || $_SESSION['adminsts'] == sadmin) {
                            echo '<a href=/admin>
                            <img id=admingears src="/image/admin.png" alt="Admin Panel">
                            </a>';
                        }
                    } else {
                        echo '<a href=/login>
                            <img id=login src="/image/login.png" alt="Login">
                            </a>';
                        echo '<a href=/login/register.php>
                            <img id=register src="/image/register.png" alt="Register">
                            </a>';
                    }
                ?>
            </span>
        </div>
        <?php
            //NAVIGATION BAR IMPORT
            echo '<div id=navbar>';
                include 'navbar.php';
            echo '</div>';
        ?>
    </body>
</html>

CSS（主要文件）

body {
    background-color: lightgrey;
    margin: 20px;
    margin-left: 200px;
    margin-right: 200px;
}

a {
    text-decoration: none;
}
#header{
    display:block;
}

#logreg{
    vertical-align: top;
    padding-top: 0px;
    float: right;
    display: inline-block;
}

#logreg a {
    padding-right: 1px;
}

NAVBAR.PHP

    <?php
        session_start();
    ?>
    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="/navbarstyle.css">
        </head>
        <body>
            <div id=navbar>
                <ul>
                    <li><a href=/>Home</a></li>
                    <li><a href=/vatsim>VatSim Online Training</a></li>
                </ul>
            </div>
        </body>
    </html>

navbar.css

#navbar {
    background-color: #33ccff;
    padding: 5px;
}

#navbar li, a {
    text-decoration: none;
    display: inline;
    color: blue;
    font-size: 20px;
    font-weight: bold; 
    padding-left: 5px;
    padding: 20px;
    border-color: black;
    border-style: solid;
}

#navbar ul {
    margin: 0px;
    padding-left: 0px;
}

Answer 1

您在文档中选择所有 <a>标记：

#navbar li, a {
    ....
}

要将这些样式的范围限定在<a> #navbar范围内，您需要删除逗号（,）

CSS代码影响它不应该影响的内容

1 个答案: