How to cover! important?
P粉200138510
2023-08-23 18:46:30
<p>I created a custom stylesheet that overrides the original CSS of my WordPress template. However, on my calendar page, the original CSS sets the height of each table cell using the <code>!important</code> declaration: </p>
<pre class="brush:php;toolbar:false;">td {height: 100px !important}</pre>
<p>Is there any way to override this? </p>
In addition to overriding the style set by the
style
attribute,!important
is only used if the selector in the stylesheet matches the specificity .However, even if your specificities conflict, it is better to create a more specific selector for the exception. For your case, it's better to include a
class
in the HTML, which you can use to create more specific selectors that don't require!important
rules.I personally never use
!important
in a stylesheet. Remember, the C in CSS stands for cascade. Using!important
will break this.Override !important modifier
!important
and give the selector more specificity (add extra tags, ids or classes to the selector)Some examples with higher specificity (first is highest/coverage, third is lowest):
Or add the same selector after the existing selector:
Disclaimer:
Using
!important
is almost never a good idea. This is poor engineering by WordPress template creators. It virally forces users of the template to add their own!important
modifiers to override it, and limits the options for overriding it via JavaScript.However, it would be useful to know how to override it if needed at times.