覆盖 html div 中的链接样式答案

【问题标题】：override link style inside an html div覆盖 html div 中的链接样式
【发布时间】：2013-10-22 04:50:57
【问题描述】：

我有一个 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;}

我像这样使用 div：

<div id="macrosectiontext"><a href="www.google.it">bla bla bla</a></div>

但它似乎不起作用。 div 仍然继承全局链接样式。

【问题讨论】：

我在您的 HTML 中没有看到锚链接
只要写#macrosectiontext a {color:#000000};就行了
对我来说很好。这是jsfiddle。
@Paulie_D：我忘记添加锚链接了……在这里
是的，上面提到的 JSFiddle 似乎证实它应该可以工作。也许你在某个地方有拼写错误？

标签： css html hyperlink stylesheet

【解决方案1】：

CSS 工作在继承上，所以你应该只覆盖你想要改变的属性。

尝试始终将 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;
}

我 made a fiddle for you 显示您的代码正在运行（更改了悬停颜色，仅用于演示）

【讨论】：

【解决方案2】：

在 css 中，我不会使用 id "#macrosectiontext a:link..." 作为链接代码，我会使用类 ".macrosectiontext"
在链接样式中使用小写字母“a”而不是大写字母“A”
如果您只使用该样式几次，您可以在链接周围使用 span 标签，然后从 span 标签而不是 div 调用您的样式。

【讨论】：

提到的第一点是关键。为链接分配一个类并定义类内的颜色。酷！