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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
In addition to overriding the style set by the
styleattribute,!importantis 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
classin the HTML, which you can use to create more specific selectors that don't require!importantrules.td.a-semantic-class-name { height: 100px; }I personally never use
!importantin a stylesheet. Remember, the C in CSS stands for cascade. Using!importantwill break this.Override !important modifier
!importantand 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):
table td {height: 50px !important;} .myTable td {height: 50px !important;} #myTable td {height: 50px !important;}Or add the same selector after the existing selector:
td {height: 50px !important;}Disclaimer:
Using
!importantis almost never a good idea. This is poor engineering by WordPress template creators. It virally forces users of the template to add their own!importantmodifiers 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.