CSS shows when in developer tools but not in file
Question
I am currently putting together a website, i have included a dynamic navigation bar developed purely in PHP with my basic ability.
However, using Chrome Dev Tool, i managed to obtain the style i wanted (on current page highlight the page name in white on navigation) , when including the style into my css file, the webpage would not show the style.
<?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>';
} >?
The css below
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;
}
From what i could see there was no two styles which were over-riding.
Help will be much appreciated
Thank you !
1 answers
solution1
0 ACCPTED 2017-10-30 12:59:51
change
a#current {
color: #white;
}
to
#nav a.current {
color: white;
}
explanation: # is the selector for id attributes, but you want to select the class "current". Class names are selected by . . Also, when using named colour values, don't prefix them with # - you only need the hash for hexadecimal rgb values.
In addition to all that, you have to add #nav in front of the rule so that it is more specific than the general rule #nav a . (You should also read up on CSS specificity in general)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.