CSS Help - How can a DIV ignore css previously set on the page?

问题

I am using AjaxControlToolkit CalendarExtender. Some previous rule in my stylesheet is affecting div's within the calendar.

div#paymentRegion div
{
    float:left;
    width:49%;
}

There are DIVs within the calendar that are being forced to 49%. How can I have the calendar ignore the previous settings and use the styles that come with the calendar? Is that possible? I am afraid to change the current rule, but I think it probably needs to be, however many other divs on this control rely on it. What does the > symbol do to a css rule. For example

div#paymentRegion > div
{
    float:left;
    width:49%;
}

Maybe that will help? I am open for any suggestions. Thanks, ~ck in San Diego

回答1:

Theoretically, the > symbol would select only divs that are immediate children of #paymentRegion. A div nested farther down would be unaffected. However, not all browsers interpret that correctly, so it's not something you can reliably use.

A more direct solution is to wrap your calendar in a <div id="calendar"> and then write an overriding rule:

div#paymentRegion div {
    float: left;
    width: 49%;
}

div#calendar div {
    float: none;
    width: auto;
}

Now even though most divs inside #paymentRegion will be floated, the divs inside #calendar won't be!

回答2:

VoteyDisciple is right, since his proposed solution's rule has a higher specificity than your current one.

More information on calculating specificity rules.

回答3:

It's difficult to know what to suggest without any HTML. Can you tell us the basic structure? For example, is the div that is targeted in the first rule a direct child of #paymentRegion?

If it is the highest level div (not necessarily a direct child), and all other divs are below that one, you can try this:

div#paymentRegion div {
    float: left;
    width: 49%;
}

div#paymentRegion div div {
    float: none;
    width: auto;
}

However, the best bet would be to set a class/ID on that mysery div, if you can change your HTML.

div#paymentRegion div#uniqueID {
    float: left;
    width: 49%;
}

来源：https://stackoverflow.com/questions/1337653/css-help-how-can-a-div-ignore-css-previously-set-on-the-page

标签

css

html

ajaxcontroltoolkit