我目前正在组建一个网站,我已经包含了一个纯粹用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;
}
从我所看到的,没有两种风格可以超越。
非常感谢帮助
谢谢!
答案 0 :(得分:0)
变化
a#current {
color: #white;
}
到
#nav a.current {
color: white;
}
说明:
#
是id
属性的选择器,但您想要选择class
&#34;当前&#34;。类名由.
选择。此外,在使用命名颜色值时,不要在#
前加上它们 - 您只需要十六进制rgb值的哈希值。
除此之外,您还必须在规则前添加#nav
,以使其比一般规则#nav a
更具体。 (您还应该阅读CSS specificity一般)