如何覆盖 !important? [英] How to override !important?

问题描述

我创建了一个自定义样式表，它覆盖了我的 Wordpress 模板的原始 CSS.但是，在我的日历页面上，原始 CSS 使用 !important 声明设置了每个表格单元格的高度:

I have created a custom style sheet that overrides the original CSS for my Wordpress template. However, on my calendar page, the original CSS has the height of each table cell set with the !important declaration:

td {height: 100px !important}

有什么方法可以覆盖它吗?

Is there some way I can override this?

推荐答案

覆盖 !important 修饰符

1. 只需添加另一个带有 !important 的 CSS 规则，并赋予选择器更高的特异性(向选择器添加额外的标签、id 或类)
2. 在比现有规则更晚的位置添加具有相同选择器的 CSS 规则(在平局中，最后一个定义的获胜).

1. Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id or class to the selector)
2. add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).

一些具有更高特异性的示例(第一个是最高/覆盖，第三个是最低):

Some examples with a higher specificity (first is highest/overrides, 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 one:

td {height: 50px !important;}

免责声明:

使用 !important 几乎从来都不是一个好主意.这是 WordPress 模板创建者的糟糕工程.它以病毒式传播方式强制模板用户添加他们自己的 !important 修饰符来覆盖它，并限制了通过 JavaScript 覆盖它的选项.

Disclaimer:

It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.

但是，如果有时需要，了解如何覆盖它很有用.

But, it's useful to know how to override it, if you sometimes have to.

这篇关于如何覆盖 !important?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！