CSS сломал мозг:)

Замутил класс CSS — цель сделать заголовок в белом цвете, жирным и заглавными буквами со ссылкой и чтобы ссылка не меняла цвет заголовка (ну типа в зависимости от посещения, ховера и т.п.)  И всё как бы работает, но в сафари на MacOS (версии самые новые и того и другого) ссылка ведёт себя как ссылка, а не так как я ей задаю. Поначалу сделал так:

    .footer-block-title {
                border-bottom: 1px #fff solid;
                padding: 0 0 15px 0;
                margin: 0 0 15px 0;
                font-size: 18px;
                text-transform: uppercase;
                font-weight: 600;
                text-decoration:none;
                color: #ffff;
                 
            }
           .footer-block-title a {
                    color: #ffff;
                }  

и это работает везде корректно, кроме этого злобного сафари.  Потом сделал так:

.footer-block-title {
                border-bottom: 1px #fff solid;
                padding: 0 0 15px 0;
                margin: 0 0 15px 0;
                font-size: 18px;
                text-transform: uppercase;
                font-weight: 600;
                text-decoration:none;
                color: #ffff;
            }
 .footer-block-title a:link {
                    color: #ffff;
                  text-decoration:none;              
                }  
             .footer-block-title a:active {
                    color: #ffff;
                  text-decoration:none;              
                }  
             .footer-block-title a:visited {
                    color: #ffff;
                  text-decoration:none;              
                }  
             .footer-block-title a:hover {
                    color: #ffff;
                  text-decoration:none;              
                }  

но стало ещё хуже. Причем эти конструкции a:hover, a:active и так далее, отлично работают непосредственно в HTML:

<style type=»text/css«> .myLinkClass:hover {text-decoration:none;color: #ffff; font-size: 18px; text-transform: uppercase; font-weight: 600;} .myLinkClass:link {text-decoration:none;color: #ffff; font-size: 18px; text-transform: uppercase; font-weight: 600;} .myLinkClass:active {text-decoration:none;color: #ffff; font-size: 18px; text-transform: uppercase; font-weight: 600;} .myLinkClass:visited {text-decoration:none;color: #ffff; font-size: 18px; text-transform: uppercase; font-weight: 600;} </style> <a href=»/news/» class=»myLinkClass«>НОВОСТИ</a>

И в том же Сафари всё отлично. А переношу это дело в общий класс и кирдык происходит. Просто не хочется мутить ещё один класс, ведь он же уже есть  footer-block-title и нужно только добавить описание для a: hover и т.п. Если я тупо пишу:

  .footer-block-title a {
                    color: #ffff;
        hover: text-decoration:none;      

                }  
или так

  .footer-block-title a {
                    color: #ffff;
        .hover: text-decoration:none;      

                }  

то редактор ругается, что синтаксис неправильный

а если делаю так:

.footer-block-title a:link {
                    color: #ffff;
                  text-decoration:none;              
                }  
             .footer-block-title a:active {
                    color: #ffff;
                  text-decoration:none;              
                }  

то и вовсе не работает всё.  Что я тут делаю не так?