Несколько тегов <a>с разными атрибутами css?

Question

Я работаю над проектом, и меня беспокоит небольшая проблема. Я создал специальную кнопку для ссылки на регистрацию, которая сейчас не нужна. Итак, я исправил одну проблему, но я пытаюсь понять, почему она не работала раньше.

Моя специальная кнопка получила эту кодировку -

<div class="registerbut"><a href="pages/register.html" name="register">Register</a></div>

с этим CSS -

.registerbut {
    height: 67%;
    padding: 5px 7px;
    border-radius: 4px;
    background-color: #333;
    margin-left: 6px;
    font-family: arial;
    font-size: 13px;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    border-width: 2px;
    border-style: outset;
    border-color: gray;
}

.registerbut a:visited,
a:link,
a:hover,
a:active {
    text-decoration: none;
    color: white;
}

Да, я создал кнопку из тега <a>, который я сделал так, чтобы он выглядел как еще одна кнопка, рядом с которой она находится, но в ней совершенно не было необходимости, потому что все, что мне нужно было сделать, это поместить ее в форму в качестве основной кнопки c.

Позже я возился с другим тегом <a> и пытался указать ему c специфик c класс -

<div class="post_link"><a href="reply.html">Example post</a></div>

и CSS с этими атрибутами -

.post_link a:visited,
a:link,
a:hover,
a:active {
    text-decoration: none;
    color: #2A75B3;
}

, но, согласно моему инспектору элементов, он принимает .register, но CSS, а не CSS, который я ему дал.

Почему не будет ли мой новый класс <div> перекрывать другой CSS?