开发者

CSS Order/Priority Help

开发者 https://www.devze.com 2023-02-08 21:36 出处:网络
Question about my CSS... here is what I\'m doing I have a Base.CS开发者_JS百科S that contains all base type CSS, from HTML,BODY,A,A:link etc etc

Question about my CSS... here is what I'm doing

I have a Base.CS开发者_JS百科S that contains all base type CSS, from HTML,BODY,A,A:link etc etc I also have a Class.CSS that contains class type css, from .header_Link to .global_Links

My link tag loads Base.Css first, Class.css second, I'm also going to have a dynamic css loaded after to overwrite any class

in Base.css,

A
{
  color: #3333cc;
}

in Class.css

.header_Link
{ }
.global_Link
{
  color: Black;
}

I know having a global is unnessessary since I have a base for A, but the reason I'm doing this is so I can specify which links can be changed as global and give option to change specific links per page or control

So I have a header link with following..

<a href="" class="global_Link header_Link">Link</a>

Problem I'm having is.. my links are still coming up #3333cc

Any idea what I'm doing wrong?


in my mind there are only 2 Options:

  1. The CSS-Files are loaded in wrong order.
  2. There are a second CSS-command who overwrites after your .global_Link the Link.


Try using it like this

.global_Link:link,
.global_Link:active, 
.global_Link:active, 
.global_Link:visited
{
  color: Black;
}


First you should be using one stylesheet with your base/reset at the very top and your styles after the reset. If you are using print styles those would come last.

If having one stylesheet is not an option, then check the media of your stylesheet

i.e.

insted of this

<link type="text/css" href="base.css" rel="stylesheet"  />
<link type="text/css" href="class.css" rel="stylesheet" />

you should have this

<link type="text/css" href="base.css" rel="stylesheet"  />
<link type="text/css" href="class.css" rel="stylesheet" media="all" />

Also check to make sure you don't have that class showing up in your base.css, inline styles or an internal stylesheet.

Also check the specificity of your selectors in the css

For example if you have

#body ul li a { color: #33cc11} 

will take precedence over this

a { color: #444444 }

what would probably work in the css is

.global_link a

and not just

.global_link
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号