Question

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

问题是，有一些表格我想100％制作，但我也不想编辑任何CMS的代码。

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

我可以添加.content table {width:100%!important}现在使mytableclassname为100％，也可以添加其他每个100％宽度的表。

有没有办法将.content table {width:}设置为中性以删除强制自动尺寸，然后设置.mytableclassname {width:100%}？

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

Answer 1

这是一个特定问题。使用

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

覆盖默认规则。简单地说，它有更多的重量＆＃34; （即更高的特定性），而不是您在问题中列出的任何规则。

Answer 2

不幸的是，我无法使用!important覆盖另一个选择器!important。使用Bootstrap时，这个问题很常见。通过以下传统方式提高特异性：

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

正如约翰内斯所建议的那样通常有效，但如果失败了，那么有一种非传统的方式可以达到99.9％的时间：

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

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

演示

＆＃13;

.content {
  border: 1px dashed green
}

table {
  border: 1px solid black
}

table.X.X {
  border-color: blue !important;
}

.content table {
  border-color: red !important
}

＆＃13;

<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>

＆＃13;

覆盖CSS！重要

2 个答案:

演示