CSS link background-color property depends on where I place block in file

Question

Sorry for a weird title, but I'm not sure how to describe this. So basically I've made a link that looks like a button on my page and used the class ".btn" to describe it. In my CSS file I have a block that describes ".btn:link, .btn:visited" and then I also have a block describing ".btn:hover, .btn:active". Now I have one background color set in the link block and another background color set in the hover block. If I put the hover block before the link block in the CSS file, the color won't change when I hover over the button. However, if I put the hover block AFTER the link block, then the hover color change works as expected.

Can anyone explain why CSS works like that and what's happening?

The btn-full and btn-ghost classes are just 2 different types of buttons in terms of color but they both inherit from the btn class.

.btn:link,
.btn:visited {
    border-radius: 200px;
    display: inline-block;
    font-weight: 300;
    padding: 10px 30px;
    text-decoration: none;
}

.btn-full:link,
.btn-full:visited {
    background-color: #e67e22;
    border: 1px solid #e67e22;
    color: #fff;
}

.btn-ghost:link,
.btn-ghost:visited {
    border: 1px solid #e67e22;
    color: #e67e22;
}

.btn:hover,
.btn:active {
    background-color: #cf6d17;
}