覆盖html div中的链接样式

时间:2013-10-14 15:08:03

标签: css html hyperlink stylesheet

我有一个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仍然继承了全局链接样式。

2 个答案:

答案 0 :(得分:10)

CSS处理继承,因此您应该只覆盖要更改的属性。

始终尝试编写HTML&amp; 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显示您的代码正在运行(更改了悬停颜色,仅用于演示

答案 1 :(得分:7)

  1. 在css中我不会使用id“#macrosectiontext a:link ...”作为链接代码我会使用类“.macrosectiontext”

  2. 在链接样式中使用小写“a”而不是Cap“A”

  3. 如果您只使用该样式几次,则可以在链接周围使用span标记,然后从span标记中调用您的样式而不是div。

相关问题