How to design the link text color inside the div according to its class

Question

The link color and design have set for all links but he links inside the div is not showing any changes.

I want to design the excerpt link opposite to the admin operation links. Means background color and white text. But here the background color is working no effect on text color. I have made it appear in the white text but nothing happened.

I can change the color using a class but it does not change with class a:link Also, hover does not work.

HTML

<div class="entry-content">
        <p>The standard Lorem Ipsum passage...<a class="more" href="#">Read the full article</a></p>
<span class="cat-links">Posted in <a href="#" rel="category tag">Design</a></span><span class="comments-link"><a href="#">Leave a Comment<span class="screen-reader-text"> on Lorem copied</span></a></span><span class="edit-link"><a class="post-edit-link" href="#">Edit <span class="screen-reader-text">Lorem copied</span></a></span>
</div>

CSS

.entry-content a.more:link {
    padding: 0px 5px;
    border-radius: 5px;
    border: 1px solid #17a2b8;
    background-color: #17a2b8;
    color: #ffffff;
}

How to use the class for link color, background color and change on hovering it...?

Answer 1

If I'm understanding correctly:

.entry-content p {
/*whatever color you need for paragraph text*/
color: #000000
}

.entry-content a:hover {
/* whatever color you need for link hover */
color: #ffffff;
}

You can of course do the same calling the span classes individually if you need different colors or hovers for each link. Don't forget to keep in mind the order of precedence.