Turn off CSS property

问题

Lets say I have a plugin's CSS which loads later as my style.css

/*style.css*/
.something {
position:absolute;
left: 0px !important;                       
}

/*plugin's CSS*/
.something {
position:absolute;
left: -50px;                       
} 

/now it has 0px but i want no left value at all/

i know i can set !important so that property wont be overriden, but is there any solution to turn "left" off as Chrome DevTools uncheck a property?

回答1:

As far as I am aware (someone please feel free to correct me) there is no way to directly "turn off" a CSS property like in the Chrome DevTools.

The closest you can get it to reset the property to its default. In your example, it would be "left:auto;"

P.S. You may wish to adjust your tags to get more views and hopefully answers.

回答2:

You should use the "auto" value for left:

.something
{
    position:absolute;
    left:auto !important;
}

"auto" will reset to the default (that is set by browsers for that style)

more info here: http://www.w3schools.com/cssref/pr_pos_left.asp

回答3:

Specificity is the key to selecting the CSS attribute that you really want. Leverage the specific structure of the HTML in the plugin vs. non-plugin case so that specificity rules select the CSS you desire when plugin rules should apply.

There's a great overview of specificity here:

Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

One thought that comes to mind is to use an additional class, plugin, along with an appropriate selector.

回答4:

If you are trying to override it then you can play with CSS Specificity Rules

来源：https://stackoverflow.com/questions/11939519/turn-off-css-property