Вопрос

I'm getting really confused here with my stylesheet. I have a lot of specific link styles in my sheet, and for some reason randomly one of them will get overridden by something else when I check the page with Chrome Dev Tools or Firebug. After fiddling around with !important cases and realizing that they are slowly making my code absolutely terrible, I've removed them all and am trying to figure out how to organize my link style to get all the right styles in the right places without them being overridden.

Basically I have like so:

.newlinks a {
some styling}

.dl a {
some styling}

.abclink a {
some styling}

And .newlinks is getting the "some styling" from ".abclink a". I'm really confused why this is happening if the class has a specific name and not just like "p" or something. Any explanation would be helpful! Thank you!

edit: here is the order of the html

<div class="newlinks"><a href="#"></a></div>
more of the page..
<div class="abclink"><a href="#"></a></div>
<div class="dl"><a href="#"></a></div>

I could post the longer code if necessary, I just thought it might be a general issue with my ordering or wording or something.

editedit: here it the relevant css/html in a jfiddle

http://jsfiddle.net/Ub6er/

as you can see in the jsfiddle, the link in "underrighttext" is getting the style from .dl :(

Это было полезно?

Решение

The reason underrighttext is being styled like dl is because of how you've declared your CSS for dl:

.dl a, a:active, a:visited {
    ...
}

This selector, which I copy-pasted from your JSFiddle, will apply to all a in dl, but also to all a:active and a:visited. Not just the a:active inside of dl!

You need to fix your selectors for the active and visited state to be like this:

.dl a, .dl a:active, .dl a:visited { ... }

Right now, your active and visited links are just being styled with whatever was the last style parsed by the browser.

I've updated your jsfiddle with the correct CSS selectors. It should work now as you expect it.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top