覆盖 CSS 重要

Question

CMS 自动将 .content table {width:auto!important} 添加到我的所有页面。（具有 MobileFrontend 扩展和移动视图中的站点的 MediaWiki）

问题是，有一些 table 我想 100%，但我也不想编辑任何 CMS 代码。

我可以添加自己的 CSS 并使用 .mytableclassname {width:100%} 和 .mytableclassname {width:100%!important} 两者都没有将我的 table 设置为 100%。

我可以添加 .content table {width:100%!important}，它现在使我的 table 类名成为 100%，而且所有其他 table 也成为 100% 宽度。

有没有一种方法可以将 .content table {width:} 设置为中性值以移除强制自动大小，然后再设置 .mytableclassname {width:100%}？

我不想使用任何 ID，因为同一页面上可能有多个 table。

Answer 1

这是一个特异性问题。使用

.content table.mytableclassname {width:100% !important}

覆盖默认规则。简单地说，它比您在问题中列出的任何规则都多 "weight"（即更高的特异性）。

Answer 2

不幸的是，没有办法使用 !important 来覆盖另一个带有 !important 的选择器。这个问题在使用 Bootstrap 时也很常见。通过这样的常规方式提高特异性：

 .content table.mytableclassname {width:100% !important}

正如 Johannes 所建议的那样通常可行，但如果失败了，则有一种非常规的方法在 99.9% 的时间内都有效：

 table.mytableclassname.mytableclassname {width:100% !important}

通过重复一个已经存在的 class，你胜过那个选择器（在 AD&D 术语中它使剑 +2 变成剑 +3），甚至不需要添加任何额外的 classes，重新排列布局，使用JavaScript/jQuery，等等

演示

.content {
  border: 1px dashed green
}

table {
  border: 1px solid black
}

table.X.X {
  border-color: blue !important;
}

.content table {
  border-color: red !important
}

<div class='content'>
  <table>
    <tr>
      <td>Table</td>
    </tr>
  </table>

  <table class='X'>
    <tr>
      <td>Table.X</td>
    </tr>
  </table>
  .content
</div>

<table class='X'>
  <tr>
    <td>Table.X</td>
  </tr>
</table>

<table>
  <tr>
    <td>Table</td>
  </tr>
</table>

覆盖 CSS 重要

Override CSS !important

css

mediawiki

css-specificity

演示