Question

我的问题是我使用块/按钮样式图形设置了我的导航栏。当我把任何标签放到那个造型上时，它的效果还不错吗？在css样式表上是否有一种方法可以阻止该样式并使用不同的样式。我也在其他页面上遇到过这个问题，但它最终没有成为问题。有人可以帮忙吗？

css：

nav { 
    position:relative; 
    z-index:3; 
    position: absolute; 
    margin-left: 420px; 
    margin-top: -15px; 
    float: right;
}

ul { 
    list-style-type: none; 
    margin-top: 2px; padding: 0; 
    overflow: hidden; 
}

li { 
    float: left; 
    margin-top: 0px; 
}

a:link,a:visited { 
    display: block; 
    width: 100px; 
    height: 25px; 
    font-weight: bold; 
    font-size: 12px; 
    color: #000000; 
    background-image: url(images/buttonreg.png); 
    text-align: center; padding-top: 5px; 
    text-decoration: none; 
    font-variant: small-caps; 
}

a:hover,a:active { 
    color: #FFAA50; 
    background-image: url(images/buttonhover.png); 
}

html：只是一个无序列表

             <nav>
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="portfolio.html">portfolio</a></li>
            <li><a href="services.html">services</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul> 
    </nav>

Answer 1

不清楚你的问题是什么，但我确定你想做的事情很容易。听起来您需要为元素添加类或ID，或者使CSS更具体。 E.g。

nav ul { 
    list-style-type: none; 
    margin-top: 2px; padding: 0; 
    overflow: hidden; 
}

nav li { 
    float: left; 
    margin-top: 0px; 
}

nav a:link,a:visited { 
    display: block; 
    width: 100px; 
    height: 25px; 
    font-weight: bold; 
    font-size: 12px; 
    color: #000000; 
    background-image: url(images/buttonreg.png); 
    text-align: center; padding-top: 5px; 
    text-decoration: none; 
    font-variant: small-caps; 
}

nav a:hover,a:active { 
    color: #FFAA50; 
    background-image: url(images/buttonhover.png); 
}

Answer 2

只需选择<a>后代的<nav>元素，即可使CSS选择器更具针对性：

nav a:link,
nav a:visited { 
    display: block; 
    width: 100px; 
    height: 25px; 
    font-weight: bold; 
    font-size: 12px; 
    color: #000000; 
    background-image: url(images/buttonreg.png); 
    text-align: center; padding-top: 5px; 
    text-decoration: none; 
    font-variant: small-caps; 
}

nav a:hover,
nav a:active { 

    color: #FFAA50; 
    background-image: url(images/buttonhover.png); 
}

导航接管其他<a href=""> tags</a>

2 个答案: