html - 是否可以让 CSS 类相互扩展？

Question

我有一些 CSS 类：

  .span9 {
    width: 870px;
  }
  .span4 {
    width: 370px;
  }

在另一个自定义 CSS 文件中，我想创建另一个 CSS 类 .span9？我该怎么做呢？

原因是 DOM 元素使用 .span4 并且我想覆盖它，但它必须在自定义外部 CSS 文件中被覆盖。

这可能吗？

score 1 · Accepted Answer

是的，CSS 是级联的（样式表），因此只需在初始样式之后加载更改，它就会按照您的意愿工作。如果你想覆盖宽度只需重新声明，如果你想添加样式简单声明它们。

score 1 · Accepted Answer

您可以使用 !important 功能覆盖另一个文件中的任何设置，因此在您的新文件中您可以执行以下操作：

.span9 {
  width: 800px !important;
}

score 1 · Accepted Answer

如果您有不同的 .span 父级，您可以这样做：

HTML

<div id="parent">
   <span class="span9"> Hello world!</span>
</div>

CSS

.span9{width:870px;}
#parent .span9{width:100px;}

或者直接在你的 HTML 中（但这不是一个很好的方法）

<span class="span9" style="width:100px!important;"> Hello world</span>

score 1 · Accepted Answer

是的，只需使用!important. 这将覆盖它之后的其他 CSS 规则，除非它们也被标记为!important.

所以你的第二个样式表可能包含类似

.span9 {
    width: 1020px !important;
  }

这就是 CSS 的默认设置。您可以使用它来覆盖 CMS 等中的内置样式表，而不必弄乱它们的实际样式表。

score 1 · Accepted Answer

您可以通过连接标签名称和类名称来覆盖它。例如，这个：div.span4将覆盖简单.span4，看看：http: //jsfiddle.net/5dYHG/1/

5 回答 5