Question

我的html，loader-inner和loader-inner 2中有两个不同的对象/元素/ div。它们具有完全相同的统计数据，但颜色随第二个对象而变化。编写此代码的最有效方法是什么？我知道我不应该用不必要的代码重复自己，所以我能以某种方式将这两者结合起来，只是以某种方式改变第二个元素的颜色吗？

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 50%;
  background-color: #4ae287;
  border: 3px solid #f3f3f3;
  border-right: 2px;
  animation: loader-inner 2s infinite cubic-bezier(.83, .08, .21, .98);
  z-index: 1001;
}
.loader-inner2 {
  vertical-align: top;
  display: inline-block;
  width: 50%;
  background-color: #4ae2cb;
  border: 3px solid #f3f3f3;
  animation: loader-inner2 2s infinite cubic-bezier(.83, .08, .21, .98);
  z-index: 1001;
}

谢谢。

Answer 1

您使用逗号并只添加选择器

.loader-inner, .loader-inner2 {
  vertical-align: top;
  display: inline-block;
  width: 50%;
  background-color: #4ae2cb;
  border: 3px solid #f3f3f3;
  animation: loader-inner2 2s infinite cubic-bezier(.83,.08,.21,.98);
  z-index: 1001;
}

然后通过定义新选择器

覆盖属性

.loader-inner {
  border-right: 2px;
  background-color: #4ae287;
}

Answer 2

.loader-inner, .loader-inner2 {
vertical-align: top;
display: inline-block;
width: 50%;
background-color: #4ae287;
border: 3px solid #f3f3f3;
border-right: 2px;
animation: loader-inner 2s infinite cubic-bezier(.83,.08,.21,.98);
z-index: 1001;}


.loader-inner2 {
 background-color: #4ae2cb;
}

Answer 3

如果这是唯一的情况，你可以预见我会继续将它们一起定义，然后创建第二个来覆盖颜色，如下所示：

.loader-inner, .loader-inner2 {
    vertical-align: top;
    display: inline-block;
    width: 50%;
    background-color: #4ae287;
    border: 3px solid #f3f3f3;
    border-right: 2px;
    animation: loader-inner 2s infinite cubic-bezier(.83,.08,.21,.98);
    z-index: 1001;
}

.loader-inner2 {
    background-color: #4ae2cb;
}

Answer 4

使用逗号组合它们：

.loader-inner, .loader-inner2 {
vertical-align: top;
display: inline-block;
width: 50%;
background-color: #4ae287;
border: 3px solid #f3f3f3;
border-right: 2px;
animation: loader-inner 2s infinite cubic-bezier(.83,.08,.21,.98);
z-index: 1001;
}

之后，只需覆盖background-color：

即可

.loader-inner2 {
background-color: #4ae2cb;
}

Answer 5

这是最干净的方法：

.loader-inner,
.loader-inner2 {
  animation: loader-inner 2s infinite cubic-bezier(.83, .08, .21, .98);
  border: 3px solid #f3f3f3;
  display: inline-block;
  vertical-align: top;
  width: 50%;
  z-index: 1001;
}
.loader-inner {
  background-color: #4ae287;
  border-right-width: 2px;
}
.loader-inner2 {
  background-color: #4ae2cb;
}

只定义中的属性 以逗号分隔的选择列表。

仅在特定选择器中定义个人属性。

如何有效地组合具有相同统计数据的两个css类？

5 个答案: