Html 更改链接样式,仅适用于某个类
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2571660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing a link-style, only for a certain class
提问by abelenky
I want to change the link-style for some of my links, like this:
我想更改一些链接的链接样式,如下所示:
a:hover
{
/* These links will be blue when hovered-over */
background-color: #3366FF;
}
However, I only want this to take effect in my Navigation Bar, and not for regular links.
但是,我只希望这在我的导航栏中生效,而不是对常规链接生效。
I have tried variations on this:
我已经尝试了这方面的变化:
#navbar a:hover
{
/* These links will be blue when hovered-over */
background-color: #3366FF;
}
With the intended meaning "this only applies to links with <div id="navbar">
"
But it didn't work.
具有预期的含义“这仅适用于与<div id="navbar">
”的链接,
但它不起作用。
How can I set the style for only certain links, defined by the class
or id
of their container?
如何仅为某些链接设置样式,由其容器的class
或定义id
?
回答by Paul
That looks ok to me, Robusto has a valid point with the colour used.
对我来说这看起来没问题,Robusto 对所使用的颜色有一个有效的观点。
Another method is giving the links a class of their own, eg:
另一种方法是给链接一个自己的类,例如:
CSS
CSS
a.navlink:visited
a.navlink:hover
{
background-color: #3366FF;
}
HTML
HTML
<a href="index.html" class="navlink">Home</a>
回答by gmunkhbaatarmn
Maybe your tested links are visited links. I prefer:
也许您测试的链接是访问过的链接。我更喜欢:
#navbar a:hover,
#navbar a:visited
{
background-color: #3366FF;
}
回答by Robusto
I think you may want to use the "color" property here instead of "background-color".
我想你可能想在这里使用“颜色”属性而不是“背景颜色”。
If by chance you really dowant to change the background-color, remember that links display inline and don't have a large, comfortable rectangle around them, so depending on the container's background color it might not be noticeable. (This is probably not the case, but I threw that in in case your links are very small.)
如果碰巧你真的做想改变背景颜色,记住,链接在线显示和没有他们周围的一大片,舒适的矩形,所以根据容器的背景颜色,可能并不明显。(这可能不是这种情况,但我把它扔了以防你的链接非常小。)
Finally, since blue is close to the default link color, consider testing with an exotic color (like red) to see if the problem is in your CSS or your color selection.
最后,由于蓝色接近默认链接颜色,请考虑使用异国情调的颜色(如红色)进行测试,以查看问题是否出在您的 CSS 或颜色选择中。