css:如何继承整个类

Question

我定义了“t_data”类来自定义我的大部分表格的外观。

不过，在某些情况下，我需要进行额外的表格特化:假设我希望“客户”和“订单”的表格看起来不同。

继承样式的默认方法是将两个类的 css 定义描述到同一个 block 中，如下所示:

table.t_data, table.t_data_order, table.t_data_customer
{
    background-color: #080;
}

这种方式在某些情况下一直有效...直到我得到太多不同的定义。

现在我已经有了这样的东西:

table.t_data thead tr th, table.t_data thead tr td, table.t_data tbody tr th,     table.t_data tbody tr td, table.t_data tfoot tr th, table.t_data tfoot tr td,
table.t_group thead tr th, table.t_group thead tr td, table.t_group tbody tr th,     table.t_group tbody tr td, table.t_group tfoot tr th, table.t_group tfoot tr td
{
    border: #333 1px solid;
}

为了自定义 t_data 以让 t_data_customer 和/或 t_data_order 看起来不同，我需要将那个 block 三倍化……并且遗漏某些元素的风险很高……我还有 10 多个这样的 block 用于不同的元素(如背景、字体等)

是否有任何 css 或甚至非 css 解决方案来解决此类问题？

非常感谢!

附言如果您没有任何解决方案而只有想法，请不要害羞地分享它们!欢迎任何想法

Answer 1

遗憾的是，您不能使用 CSS 做到这一点。幸运的是，您可以使用 CSS 预编译器为您完成此操作(示例:LESS & Sass)。更准确地说，您可以使用 Mixins(两种语言都支持)。

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below.

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

(来自 LESS 的示例)。这是您可以使用 t_data 类完成的事情。