18

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

4

2 回答 2

13

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;
}

我为您制作了一个小提琴以显示您的代码正在运行（更改了悬停颜色，仅用于演示）

于 2013-10-17T23:41:33.417 回答
10

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

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

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

于 2013-10-17T23:22:11.510 回答