CSS id传递给网站的其余部分


CSS id is passing to the rest of the website

我试图在网站上做一个导航菜单,由于某种原因,我在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:linka:visited。第二个应用于每个访问过的链接,不管它的父链接是什么。

我想你的意思是这是#topnav_ubid a:link, #topnav_ubid a:visited {。同样的错误是在下一个选择器:#topnav_ubid a:hover, a:active

在选择器列表中,我通常在逗号后添加一个分隔符,所以它可以写成:

#topnav_ubid a:link, 
#topnav_ubid a:visited {

这样,可以更容易地立即看到所有的选择器,并且您不太可能犯这个错误。

还要注意,在浏览器的开发工具(F12)中,您可以检查应用了哪些样式以及哪个选择器导致了这些样式。