Is there a syntax to resolve ambiguity in CSS class names between two style sheets?
Let's say I have an HTML page that imports two style sheets like so:
<link href="Styles1.css" rel="s开发者_如何学运维tylesheet" type="text/css" />
<link href="Styles2.css" rel="stylesheet" type="text/css" />
Also assume that a class with the same name appears in both of the above style sheets.
.SomeStyle {font-weight:bold; } /* in Styles1.css */
.SomeStyle {font-weight:normal;} /* in Styles2.css */
Question: Is there a syntax where I can apply the class to an element in a way that disambiguates which version of the style to use?
For example (pseudo-code):
<span id="mySpan" class="Styles1.css:SomeStyle">Example</span>
Disclaimer: I know that a better solution would be to resolve name conflict between the two style sheets, but I am asking mostly for academic reasons.
Is there a syntax where I can apply the class to an element in a way that disambiguates which version of the style to use?
No. The latter style overrides the former into one computed style. There is no way to undo that.
The only thing you could do is attach additional classes to each definition:
.SomeStyle.First {font-weight:bold; } /* in Styles1.css */
.SomeStyle.Second {font-weight:normal;} /* in Styles2.css */
and then use
<span id="mySpan" class="SomeStyle Second">Example</span>
Some people choose to add classes to the body tag of one more the pages so that they can disambiguate eg.
<body class="newer">
then use this when specifying newer functionality
.SomeStyle {font-weight:bold;} /* in Styles1.css */
.newer .SomeStyle {font-weight:normal;} /* in Styles2.css */
This can start to get messy though. It may be best to have your global styles on one or more files, and then page specific styles in a subsequent file. If you need to change this back, add a third rule to the page specific file and set the style back:
.SomeStyle {font-weight:bold;} /* in Styles1.css */
.SomeStyle {font-weight:normal;} /* in Styles2.css */
.SomeStyle {font-weight:bold;} /* in PageSpecific.css */
There may possibly be a way to use jQuery or something similar to rename (remove and add as a different name) one of the classes so that it has a unique name. Maybe you could read both stylesheets rather than linking and have jQuery go through, add the classes to the page as it reads them and then change any class names that already exist?
I'm not an expert in jQuery by any means, but from my limited use, I'd suspect it could be done. The question comes then in how do you use the 2nd class since you'd have to know what it'll be named and all that...
Just a quick thought...
Just a thought, not a very detailed one but. Maybe you can use php include, and have a submit button to call the function via JavaScript to include he required css. (in-fact you wouldn't need JS)
加载中,请稍侯......
精彩评论