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

Question

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

Answer 1

1. В CSS-код, я бы не использовать идентификатор «#macrosectiontext: с ссылкой ...» для кода связи я хотел бы использовать класс «.macrosectiontext»

2. использовать нижний регистр «а «вместо« Cap »A в стиле ссылки

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

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

Я made a fiddle for you, чтобы показать код работает (изменил цвет парения, только для демо)