Question

我对CSS不太熟悉。但是我正在为我的项目相关工作而努力。

我遇到了两个css类有一些常见数据的情况，如下所示：

.KPIDashboardContainerInertiaMatrixCell_data
{
display: table-cell;
font-size: 18px;
padding-top: 30px;
font-weight: bold;
text-align: left;
-webkit-column-width: 120px;
-moz-column-width: 120px;
column-width: 120px;
}

.data_right_column
{
display: table-cell;
font-size: 18px;
padding-top: 30px;
font-weight: bold;
text-align: left;
-webkit-column-width: 80px;
-moz-column-width: 80px;
column-width: 80px;
}

我试图将其减少如下：

.KPIDashboardContainerInertiaMatrixCell_data.data_right_column
{
-webkit-column-width: 80px;
-moz-column-width: 80px;
column-width: 80px;    
}

在HTML中指定类名时我指定：

KPIDashboardContainerInertiaMatrixCell_data data_right_column

但它不起作用。谁能告诉我我在这里做错了什么？有没有其他方法可以做同样的事情？

Answer 1

.KPIDashboardContainerInertiaMatrixCell_data, .data_right_column {
    display: table-cell;
    font-size: 18px;
    padding-top: 30px;
    font-weight: bold;
    text-align: left;
}

.KPIDashboardContainerInertiaMatrixCell_data {
    -webkit-column-width: 120px;
    -moz-column-width: 120px;
    column-width: 120px;
}

.data_right_column {
    -webkit-column-width: 80px;
    -moz-column-width: 80px;
    column-width: 80px;
}

Answer 2

创建基类，然后为不同的样式添加其他类

例如，想象一下造型的一些按钮：

我们有一个基本按钮类，可以设置一些默认值（在所有按钮之间共享）

.btn {
  padding: 10px 30px;
  display: inline-block;
  box-shadow:2px 2px #444;
  border-radius:50px;
}

然后你可以开始添加风格不同的类

.btn-red {
  background: red;
  color: #fff;
}
.btn-green {
  background: green;
  color: #fff;
}

HTML：

<div class="btn">Base btn</div>
<div class="btn btn-green">Green btn</div>
<div class="btn btn-red">Red btn</div>

这样做可以使您的代码保持干净状态，并且可以更轻松地更改共享样式。

DEMO https://jsfiddle.net/zzv09a67/2/

当两个类有一些共同的样式时如何减少css？

2 个答案: