如何覆盖!重要？

Question

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

td {height: 100px !important}

有什么方法可以覆盖这个吗？

Answer 1

覆盖!important修饰符

只需添加另一个CSS规则!important,并为选择器提供更高的特异性(向选择器添加额外的标签,id或类),或者在稍后的位置添加具有相同选择器的CSS规则(在一个领带中) ,最后一个定义胜利).

一些具有更高特异性的例子:

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

或者在现有选择器之后添加相同的选择器:

td {height: 50px !important;}

免责声明:

这几乎不是一个好主意!important.这是WordPress模板的创建者的糟糕工程.在病毒的方式,它迫使模板的用户可以添加自己的!important修饰符来覆盖它,它限制了选项,通过JavaScript覆盖它.

但是,如果有时必须知道如何覆盖它是有用的.

Answer 2

在!important当你在你的样式表冲突的选择,才应使用特异性.

但即使你的特异性存在冲突,最好为异常创建一个更具体的选择器.在您的情况下,最好class在HTML中使用一个可用于创建不需要!important规则的更具体的选择器.

td.a-semantic-class-name { height: 100px; }

我个人从不!important在我的样式表中使用.请记住,CSS中的C是用于级联的.使用!important将打破这一点.

Answer 3

免责声明:不惜一切代价避免!重要.

这是一个肮脏,肮脏的黑客,但你可以通过在你试图覆盖重要性的属性上使用(无限循环或非常持久)动画来覆盖!important,而不是!important.

@keyframes forceYellow {
  from {
    background-color: yellow;
  }
  to {
    background-color: yellow;
  }
}

div {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: red !important;
  animation: 1s linear infinite forceYellow;
}

<div></div>

Answer 4

好的,这是关于CSS重要性的快速课程.我希望以下有帮助!

首先,样式的每个部分都称为加权,因此与该样式相关的元素越多,它就越重要.例如

#P1 .Page {height:100px;}

比以下更重要:

.Page {height:100px;}

因此,当使用重要时,理想情况下,这应该只在真正需要时使用.因此,要覆盖decleration,使样式更具体,但也要覆盖.见下文:

td {width:100px !important;}
table tr td .override {width:150px !important;}

我希望这有帮助!!!

Answer 5

使用JavaScript覆盖

 $('.mytable td').attr('style', 'display: none !important');

为我工作.

干杯!

Answer 6

这也有帮助

td[style] {height: 50px !important;}

这将覆盖任何内联样式

Answer 7

您可以通过选择器中的上升来使用更高的特异性。

td {height: 100px !important}
/* higher precedence */
table td {height: 200px !important}

我在这里写了一篇关于如何覆盖 CSS 的详细文章。

Answer 8

第一次提出这个问题时，有几种现代方法尚不可用。

1. 用于:is()为选择器设置任意高的特异性

   :is(td, #A#A#A:not(*)) {height: 200px !important}

   选择器列表中的第二个选择器:is()设置了整个选择器的特异性，但:not(*)部分意味着选择器永远不会匹配任何元素本身。#A#A#A给出了 (3,0,0) 的特异性，但您可以安全地选择足以覆盖其他 !important 设置的任何选择器。然而，这仍然是一种黑客行为。

2. 更好的方法是使用级联层。分层 !important 声明会覆盖非分层 !important 声明，因此您可以执行以下操作：

   @layer { 
      td {height: 200px !important} 
   }
   

   通过使用命名层，您可以进一步将其覆盖到任意级别。

请注意，这两种方法都不允许您覆盖 HTML 样式属性中的 !important 设置。