html - 在 CSS 中创建一个无样式类

Question

我想在 CSS 中创建一个 nostyle 类。这样我的样式表中编写的任何 css 都可以与此类重叠，而我不需要任何样式。我使用了下面的代码，但它不起作用。

<style type="text/css">
  .nostyle {
          margin: 0;
          padding: 0;
          border: 0;
          outline: 0;
          font-size: 100%;
          vertical-align: baseline;
          background: transparent;
        }   
   </style>

Answer 1

您可能受到 CSS 特殊性规则的困扰，在这些规则中，其他规则会覆盖您的类，因为它们更具体。

考虑:

<div id="col1">
    <div class="rule1 another-rule">
        Test
    </div>
</div>

<style>
    .rule1 {
        margin: 0;
    }

    #col1 .another-rule {
        margin: 10px;
    }
</style>

在这种情况下，带样式的 DIV 上的边距始终为 10px，因为规则具有更大的权重。

要克服这个问题，您可以使用 CSS 的 !important 功能。尝试

.nostyle {
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      outline: 0 !important;
      font-size: 100% !important;
      vertical-align: baseline !important;
      background: transparent !important;
    }   

这是一个关于 CSS 特异性如何工作的很好的指南:

CSS Specificity: Things You Should know