覆盖 html div 内的链接样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19363343/
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
override link style inside an html div
提问by Gianluca Ghettini
I have a div in which I'd like to override my global link style. I have two link styles, one global, one specific. Here the code:
我有一个 div，我想在其中覆盖我的全局链接样式。我有两种链接样式，一种是全局的，一种是特定的。这里的代码：
A:link {text-decoration: none; color: #FF0000;}
A:visited {text-decoration: none; color: #FF0000;}
A:hover {text-decoration: none; color: #FF0000;}
A:active {text-decoration: none; color: #FF0000;}
#macrosectiontext
{
position:relative;
font:Arial, sans-serif;
text-align:center;
font-size:50px;
font-style: bold;
margin-top:245px;
opacity: 0.6;
background-color:transparent;
}
#macrosectiontext A:link {text-decoration: none; color: #000000;}
#macrosectiontext A:visited {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:hover {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:active {text-decoration: none; color: #FFFFFF;}
and I use the div like this:
我像这样使用div：
<div id="macrosectiontext"><a href="www.google.it">bla bla bla</a></div>
however it seems that it doesn't work. The div still inherits the global link style.
但是它似乎不起作用。div 仍然继承了全局链接样式。
采纳答案by JFelton
In The css I would not use the id "#macrosectiontext a:link..." for the link code I would use a class ".macrosectiontext"
use a lower case "a" instead of a Cap "A" in the link style
If you using the style only a few times you can use a span tag around the link and then call to your style from the span tag in stead of the div.
在 css 中，我不会使用 id“#macrosectiontext a:link...” 作为链接代码，我会使用类“.macrosectiontext”
在链接样式中使用小写“a”而不是大写“A”
如果您只使用该样式几次，您可以在链接周围使用 span 标签，然后从 span 标签而不是 div 调用您的样式。
回答by Mark
CSS work on inheritance, so you should only override the properties you want to change.
CSS 处理继承，因此您应该只覆盖要更改的属性。
Try always to write HTML & CSS lowercase, still your HTML and CSS are correct
尝试始终编写 HTML 和 CSS 小写，但您的 HTML 和 CSS 仍然是正确的
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: #f00;
}
#macrosectiontext {
position: relative;
font:Arial, sans-serif;
text-align: center;
font-size: 50px;
font-style: bold;
margin-top: 245px;
opacity: 0.6;
background-color: transparent;
}
#macrosectiontext a:link {
color: #000;
}
#macrosectiontext a:visited,
#macrosectiontext a:hover,
#macrosectiontext a:active {
color: #fff;
}
I made a fiddle for youto show your code is working (changed the hover color, just for demo)
我为您制作了一个小提琴以显示您的代码正在运行（更改悬停颜色，仅用于演示）
