如何扩展css类答案

【问题标题】：How to extend css class如何扩展css类
【发布时间】：2012-08-22 16:29:19
【问题描述】：

我需要扩展特定的 CSS 样式。例如，我正在使用第 3 方 DLL，它将 CSS 类样式动态分配给特定控件。我想在我的 asp.net 项目中创建一个具有相同名称的 css 类，其中来自第 3 方 DLL 的样式和我的项目 CSS 类样式都应用于控件。

例如，第 3 方按名称上课

.VerticalAlign
{
   vertical-alignment:center;
}

现在我按名称创建类 .VerticalAlign { color : #f3f3f3 }

当我将上述类应用于控件时，我需要将垂直对齐和颜色应用于我的控件。

如果不能使用相同的名称，是否有可能创建具有不同类名的 css 样式，该样式继承自 3rd 方 dll 中定义的 CSS 类的属性。

【问题讨论】：

您已经知道该怎么做。您的样式已经累积，这就是样式表被称为“级联”的原因。 jsfiddle.net/kQ6kT
你能再显示一些代码吗？您提供的描述应该完美无缺。无论您有多少样式表文件或<style> 块，这两种样式都应该应用于具有该类的元素。因此，如果它们不是，正如您所暗示的那样，那么肯定还有其他问题。

标签： css

【解决方案1】：

CSS 中的“C”代表 Cascading，这意味着样式可以添加到或取代之前的 CSS 规则。因此，使用您希望在原始声明上扩展的样式再次声明类名称的示例是执行此操作的正确方法。

【讨论】：

【解决方案2】：

你说得对；保留相同的名称，添加新属性，它们应该被应用。

/* From DLL */
.foo { color: blue; }

/* Your Style */
.foo { text-align: center; }

/* --- Final outcome --- */
.foo {
  color: blue;
  text-align: center;
}

您可能会遇到优先使用哪种颜色的问题（如果它们都有颜色，则哪种颜色样式获胜）。例如

/* From DLL */
.foo { color: red; }

/* Your code */
.foo { color: blue; }

您要么必须使用 !important（hack-ish），要么指定更大的 specificity（即包括标记名或其他类名或 ID）。

【讨论】：