Question

我定义了“t_data”类来自定义大多数表的外观。

虽然在某些情况下我需要做一些额外的表格专业化：让我们说我希望“客户”和“订单”的表格看起来不同。

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

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看起来不同，我将需要TRIPPLE阻止...并且存在很多错过某些元素的风险......我还有超过10个这样的块用于不同的元素（如背景，字体等）

对于这样的事情，是否有任何css或甚至非css 解决方案？

非常感谢！

P.S。如果你没有任何解决方案，只有想法，也不要害羞地分享它们！欢迎任何想法

Answer 1

如何为表和目标

添加新的常用CSS类

.common td
.common th {
}

在向表格添加课程之前，您应该确保表格的默认样式不够，例如

td {
    /* Sensible default for all table cells */
}

下一步是找到具有备用样式的表的“常用”类名。流行的框架twitter bootstrap使用“table-bordered”用于带边框的表，其他人认为找到一个语义公分母会更好。但这取决于你。

这不是关于语义或不是语义，但自从Nicole Sullivan看到一个演示文稿后，我找不到演示文稿，但我可以从中找到引用： http://css-tricks.com/semantic-class-names/

在我最近在CSS峰会上看到的Nicole Sullivan的演讲中，她呼吁一些大公司在CSS文件中声明完全相同的颜色数千次。

我一直试图找到我们在css文件中编写的内容的意义，并针对大的共同点。

Answer 2

可悲的是，你不能用CSS做到这一点。幸运的是，您可以使用CSS预编译器为您执行此操作（示例：LESS＆amp; Sass）。更准确地说，您可以使用 Mixins （两种语言都支持）。

Mixins允许您将类的所有属性嵌入到另一个属性中通过简单地将类名作为其属性之一来包含类。它就像变量，但对于整个类。 Mixins也可以表现得像函数，并采用参数，如示例中所示下方。

.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课程来完成这项任务。

Answer 3

您可以使用ID和类来代替定义多个类。

使用ID可以定义主要的CSS，并使用类来定义差异。

<table id="mainstyle" class="variation1"> ...

css：如何继承全班

3 个答案: