Question

我有一个按钮，其中包含以下一组w3.css类：

<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>

这将是我网站的一个共同主题。不是在每个按钮上写下所有这些类的列表，而是如何将这组类放入单个类mybuttonclass中，如：

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

Answer 1

您熟悉LESS等CSS预编译器吗？你可以创建一类课程。看起来像这样：

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

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

Answer 2

可能你可以添加一些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 3

如果这些类很常见，你能否将它们复制/合并到特定的类中？

我倾向于保留一个共同的按钮类（通常称为＆＃39; btn＆＃39;）和一个单独的类，最后是......

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

Answer 4

css id / class不支持继承。

.mybuttonclass,
.class1 {
    property1: value1;
}

.mybuttonclass,
.class2 {
    property2: value2;
}

.mybuttonclass,
.class3 {
    property3: value3;
}

或者你必须使用＆＃34; Sass＆＃34;或者＆＃34; Less＆＃34;例如。

萨斯：

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

Answer 5

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

.class1 {
    property1: value1;
}

.class2 {
    property2: value2;
}

.class3 {
    property3: value3;
}

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

Html中的多类

5 个答案: