重命名网格中的CSS代码

Question

我在从正在处理的网格中重命名某些类时遇到问题。

当前代码是这样的：

.col,
   .cols {
    margin-left: 4%; 
  }

  .col:first-child,
  .cols:first-child {
    margin-left: 0; 
  }


  .one.col,
  .one.cols, { 
    width: 4.66666666667%; 
  }

然后html代码是：

<div class="one col">One</div>
  <div class="eleven cols">Eleven</div>

上面的代码可以工作，但是我需要更改类名才能工作，因此html代码如下所示：

 <div class="one-col">One</div>
  <div class="eleven-cols">Eleven</div>

我的问题是...如何更改下面的代码，以便上面的html起作用？

.col,
   .cols {
    margin-left: 4%; 
  }

  .col:first-child,
  .cols:first-child {
    margin-left: 0; 
  }


  .one.col,
  .one.cols, { 
    width: 4.66666666667%; 
  }

Answer 1

只需调整CSS：

.one-col,.eleven-cols{
    margin-left: 4%; 
}

.one-col:first-child,.eleven-cols:first-child {
    margin-left: 0; 
}


.one-col { 
    width: 4.66666666667%; 
}

.eleven-cols {
    width: 51.3333333334%;
}

Answer 2

我不清楚您为什么只需要一个类，因为我们可以在class属性中声明多个类。

但是无论如何。 希望下面的代码对您有帮助，

.one-col{
    margin-left: 4%; 
    width: 4.66666666667%; 
}
.eleven-cols{
    margin-left: 4%; 
    width: 51.3333333334%;
}
.one-col:first-child,.eleven-cols:first-child{
    margin-left: 0; 
}