我试图在网站上做一个导航菜单,由于某种原因,我在id topnav_ubid中定义的内容正在应用于网站的其余部分,特别是在:link和a:visited上。我只是想把样式应用到菜单上。我试着在div内包装,但仍然没有运气。我的代码有什么问题?有人能帮忙吗?
我在style.css中定义了这个
#topnav_ubid ul li {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#topnav_ubid li {
float: left;
}
#topnav_ubid a:link, a:visited {
display: block;
width: 85px;
height: 20px;
font-weight: bold;
color: #FFFFFF;
background-color: orange;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
#topnav_ubid a:hover, a:active {
background-color: #7A991A;
在HTML中:
<div id="topnav_ubid">
<ul>
<li><a href="<?=$SETTINGS['siteurl']?>index.php?"><? print $MSG_501; ?></a></li>
<?php
if($_SESSION["BPLowbidAuction_LOGGED_IN"]) {
/* user is logged in, give link to edit data or log out */
?>
<li class="<?=$user_menu_style;?>"><a href="<?=$SETTINGS['siteurl']?>user_menu.php?"><? print $MSG_622; ?></a></li>
<li><a href="<?=$SETTINGS['siteurl']?>logout.php?"><? print $MSG_245; ?></a></li>
<?php
} else {
/* user not logged in, give link to register or login */
?>
<li class="<?=$user_login_style;?>"><a href="<?=$SETTINGS['siteurl']?>user_login.php?"><? print $MSG_259; ?></a></li>
<?php
}
?>
<li><a href="<?=$SETTINGS['siteurl']?>contents.php?show=aboutus"><? echo $MSG_5085 ;?></a></li>
<li><a href="<?=$SETTINGS['siteurl']?>contents.php?show=howitworks"><? echo $MSG_31_0048; ?></a></li>
<li><a href="<?=$SETTINGS['siteurl']?>contents.php?show=faq"> <? print $MSG_164; ?></a></li>
</ul>
</div>
#topnav_ubid a:link, a:visited {
实际上是两个选择器:#topnav_ubid a:link
和a:visited
。第二个应用于每个访问过的链接,不管它的父链接是什么。
我想你的意思是这是#topnav_ubid a:link, #topnav_ubid a:visited {
。同样的错误是在下一个选择器:#topnav_ubid a:hover, a:active
。
在选择器列表中,我通常在逗号后添加一个分隔符,所以它可以写成:
#topnav_ubid a:link,
#topnav_ubid a:visited {
这样,可以更容易地立即看到所有的选择器,并且您不太可能犯这个错误。
还要注意,在浏览器的开发工具(F12)中,您可以检查应用了哪些样式以及哪个选择器导致了这些样式。