Remove underline from link within hyperlinked div

问题

I am using the html below

<a href=""><div class="logo"><span class="whologo">hyperlinked text </span>
</div></a>

the problem i am having is that the only way to remove underline from the span text is using a:link{text-decoration:none;} but this removes underlines from ALL links from the whole page

I have tried

a.logo:link{text-decoration:none;}

but it doesnt remove the hyperlink from the span element.

回答1:

You have a wrong hierarchy there and bad element selection. In your case, the most accurate CSS would be:

a div.logo span.whologo {text-decoration:none;}

---

But I suggest this approach:

<div class="logo"><a href=""><span class="whologo">hyperlinked text </span></a>

And CSS:

div.logo a {text-decoration:none;}

Or include the span if needed (but only if the span element has underlines, like Hans pointed out in the comment):

div.logo a span.whologo {text-decoration:none;}

回答2:

Child items cannot influence their parents using CSS. You need to put an ID or class name on your A tag, or find something unique up the tree that you can specify for this element.

回答3:

Check this out

 <style type="text/css">
    .linkTst{text-decoration:none;} 
    </style>

<div class="logo"><a href="" class="linkTst"><span class="whologo">hyperlinked text </span>
   </a> </div>

回答4:

Put a class on your a tag where you don't want the underline

like this : http://jsfiddle.net/UL8SW/

回答5:

First of all: This is not valid html... And you should give your a a class or id, otherwise this isnt possible with remote css. It is possible with inline css...

来源：https://stackoverflow.com/questions/9282391/remove-underline-from-link-within-hyperlinked-div