Переопределить стиль ссылки внутри html div

У меня есть 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 по-прежнему наследует стиль глобальной ссылки.

ОТВЕТЫ

Ответ 1

  • В Css я бы не использовал id "#macrosectiontext a: link..." для кода ссылки, я бы использовал класс ".macrosectiontext"

  • используйте нижний регистр "a" вместо Cap "A" в стиле ссылки

  • Если вы используете стиль всего несколько раз, вы можете использовать тег span вокруг ссылки, а затем вызывать свой стиль из тега span вместо div.

Ответ 2

Работа 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;
}

I сделал для вас скрипку, чтобы показать, что ваш код работает (изменился цвет наведения, только для демонстрации)