开发者

Does CSS have a "start over" feature?

开发者 https://www.devze.com 2022-12-28 22:04 出处:网络
I\'m using calendar_date_select (henceforth CDS) in a Rails application, and have a stupid question. When I embed the CDS component in the 开发者_开发知识库middle of an already-CSS-styled page, all ma

I'm using calendar_date_select (henceforth CDS) in a Rails application, and have a stupid question. When I embed the CDS component in the 开发者_开发知识库middle of an already-CSS-styled page, all manner of things go ugly-wrong with it (spacing, fonts, etc.). Clearly the elements inside the CDS have inherited unwanted stuff from the styles already working in the containing page.

Now, I could use a combination of, say, Safari's CSS debugging and analyze what's wrong element-by-element. But that's (A) tedious, and (B) might load up my component's styles with tons of container-defeating special cases. If nothing else, I'm certain to change the containing page's styles in the future and would have to maintain the special cases.

My question: Is is possible to have a DIV in a page that essentially backs out all the existing styling? Is there a simple one-liner that will do this? Failing that, can it be done on an element-by-element basis?

E.g. I know what tags the CDS generates, so I could list each of them:

{ p: "#--NOTHING--#"; a: "#--NOTHING--#"; }

where #--NOTHING--# is the Magic Turn Off All Inherited Styles incantation.

http://code.google.com/p/calendardateselect/

Thanks, peeps.


You may want to surround your CDS component with a div, perhaps give it an id of CDS_wrap or something.

Then in your CSS, give a style reset to that div and all of its contents like so:

div#CDS_wrap * {
  padding: 0;
  margin: 0;
  font-size: 12px;
  etc...
}


In CSS3 there is initial which should be the thing you are looking for. If you are (like most people) targeting CSS1-CSS2 you have no other chance than to change your own CSS so that the CDS is never affected by it.


Braxo's on the right track, but didn't speak for rule priority. In addition to the (notional) #CDSReset on the calendar container and the Braxo's suggested rule, you need to overload that rule with bogus comma-separated id selectors until its priority lies where you want it:

#CDSReset, #bogusAlfa, #bogusBravo, #bogusCharlie /* &c. */ {
  ...
}

When I do this in a stylesheet, I make a habit of commenting those overloaded rules so that I don't mistake the selectors as anything but bogus bits included for the expressed purpose of gaming the priority rules.

0

精彩评论

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