Html 中的多个 Class

Question

我有一个按钮具有以下一组 w3.css classes:

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<button class="w3-btn w3-lime w3-hover-green  w3-round-large w3-border w3-border-green w3-ripple">Button</button>

这将是我整个网站的共同主题。而不是在每个按钮上写下所有这些 classes 的列表，我怎样才能将这组 classes 变成一个 class mybuttonclass 就像：

<button class="mybuttonclass">Button</button>

Answer 1

如果这些class很常见，你能不能不copy/merge把它们变成特定的class？

我倾向于保留一个通用按钮 class（通常称为 'btn'）和一个单独的 class，最后是...

 <button class="btn my_other_class">Button</button>

Answer 2

您需要将所有这些类的所有属性复制到一个中。恐怕是一项手动工作:)您可以使用浏览器中的开发人员工具来查看并复制它们。

.class1 {
    property1: value1;
}

.class2 {
    property2: value2;
}

.class3 {
    property3: value3;
}

.mybuttonclass {
    property1: value1;
    property2: value2;
    property3: value3;
}

Answer 3

您是否熟悉 CSS 预编译器，例如 LESS？你可以制作一个 class 的 classes。看起来像：

.mybuttonclass {
  .w3-btn;
  .w3-lime;
  .w3-hover-green;
  .w3-round-large;
  .w3-border;
  .w3-border-green;
  .w3-ripple;
}

否则，您必须手动将所有 CSS 属性复制到一个 class。

Answer 4

也许你可以添加一点 jquery，这可能是一个解决方案：

if ($('button').hasClass('mybuttonclass')) {
    $('button').removeClass('mybuttonclass'); //optional according to your theme requirements
    $('button').addClass('w3-btn w3-lime w3-hover-green  w3-round-large w3-border w3-border-green w3-ripple');
}

Answer 5

css id/class 不支持继承。

.mybuttonclass,
.class1 {
    property1: value1;
}

.mybuttonclass,
.class2 {
    property2: value2;
}

.mybuttonclass,
.class3 {
    property3: value3;
}

或者您必须使用 "Sass" 或 "Less" 例如。

Sass:

.mybuttonclass {
  @extend .class1;
  @extend .class2;
  @extend .class3;
}

Html 中的多个 Class

Multi Class in Html

html

css

w3.css