CSS a href styling

i ha开发者_如何学运维ve a href with class="button"

I am trying to style this like that:

.button a:link {text-decoration: none} 
.button a:visited {text-decoration: none} 
.button a:active {text-decoration: none} 
.button a:hover {text-decoration: none; background-color:yellow;color:blue}

why it is not working? how to set stye for a href with that class (class="button")

.button a is a descendant selector. It matches all <a> tags that are descendants of .button.

You need to write a.button:link to match tags that are both <a> and .button.

.button a{} is a rule for

<something class="button">
   <a href="">foobar</a>
</something>

a.button{} is a rule for

<a href="" class="button">foobar</a>

please share the html markup as well.

is button the class attribute of the anchor element or is the a tag a child of an element with class button ?

if its the former case, use

a.button:link { } etc

if its the later, your code is correct

a.button:link {text-decoration: none} 
a.button:visited {text-decoration: none} 
a.button:active {text-decoration: none} 
a.button:hover {text-decoration: none; background-color:yellow;color:blue}

Because you have said:

"An a element with the pseudo-class :blah that is a descendent of any element"

You want:

a.button:link { /* etc */