Question

我目前正在组建一个网站，我已经包含了一个纯粹用PHP开发的动态导航栏和我的基本功能。

然而，使用Chrome开发工具，我设法获得我想要的样式（在当前页面上突出显示导航中的白色页面名称），当将样式包含在我的css文件中时，网页将不会显示样式。

<?php

function outputHeader ($title){
    echo '<!DOCTYPE html>';
    echo '<html>';
    echo '<head>';
    echo '<title>' . $title . '</title>';
    echo '<link rel="stylesheet" type="text/css" href="style.css">';
    echo '</head>';
    echo '<body>';
}

//Output Navigation
echo '<div id="banner">';
echo '<div id="nav">';
echo '<ul>';
function generateNav($pagename){

    $page = array('index.php?' => 'Home', 'playerranking.php?' => 'Player Ranking', 'community.php?' => 'Community', 'register.php?' =>        'Register','login.php' => 'Login',
            );

    foreach ($page as $link => $label){
        if ($pagename == $label){
            echo '<li><a class="current" href="' . $link . '">' . $label . '</li></a>';
        }
        else {
            echo '<li><a href="' . $link . '">' . $label . '</li></a>';
        }

}
    echo '</ul>';
    echo '</div>';
    echo '</div>';

} >?

下面的CSS

    body {

    background: #000;
    margin: 0px; 
}

#banner {
    height: 109px;
    width: 1295px;
    background: #1d1d33;
    margin-right: auto;
    margin-left: auto;

}

#nav {
    margin-right: 10%;
}


#nav ul {
    overflow: visible;
    text-decoration: none;
    float: right;
}

#nav li {
    display: inline;
    font-family: Calibri, sans-serif;
    font-size: 15px;
    margin-top: 8%;
    float: left;
    padding-right: 30px;
    list-style-type: none;
    overflow: visible;
}

a#current {
    color: #white;
}

#nav a {
    text-decoration: none;
    color: #8f8fa7;
}

从我所看到的，没有两种风格可以超越。

非常感谢帮助

谢谢！

Answer 1

变化

a#current {
    color: #white;
}

到

#nav a.current {
    color: white;
}

说明： #是id属性的选择器，但您想要选择class＆＃34;当前＆＃34;。类名由.选择。此外，在使用命名颜色值时，不要在#前加上它们 - 您只需要十六进制rgb值的哈希值。

除此之外，您还必须在规则前添加#nav，以使其比一般规则#nav a更具体。（您还应该阅读CSS specificity一般）

CSS显示在开发人员工具中但不在文件中

1 个答案: