Multi-Klasse in Html

Question

Ich habe eine Schaltfläche mit dem folgenden Satz von w3.css Klassen:

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

Dies wird ein gemeinsames Thema während meiner Website. Statt sich auf jeder dieser Liste all dieser Klassen zu schreiben, und jeder Taste, wie kann ich diese Gruppe von Klassen in einer einzigen Klasse mybuttonclass wie:

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

Answer 1

Mai werden Sie ein wenig jquery hinzufügen können, die eine Lösung sein könnte:

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 2

Wenn diese Klassen gemeinsam sind, können Sie nicht kopieren/kombiniere sie in eine bestimmte Klasse?

Ich neige dazu, eine gemeinsame Taste Klasse (normalerweise genannt ‚BTN‘) und eine individuelle Klasse zu halten, mit enden ...

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

Answer 3

Sie müssen alle Eigenschaften all dieser Klassen in eine kopieren einzelne. Ein manueller Job, fürchte ich :) Sie können die Entwicklerwerkzeuge in Ihrem Browser verwenden, um diese zu sehen und sie zu kopieren.

.class1 { 
    property1: value1; 
} 

.class2 { 
    property2: value2; 
} 

.class3 { 
    property3: value3; 
} 

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

Answer 4

Kennen Sie sich mit CSS-Pre-Compilern wie LESS? Du könntest eine Klasse von Klassen machen. Was wie folgt aussehen würde:

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

Andernfalls müssten Sie alle CSS-Eigenschaften manuell in eine Klasse kopieren.

Answer 5

Vererbung wird nicht von CSS id/Klasse nicht unterstützt.

.mybuttonclass, 
.class1 { 
    property1: value1; 
} 

.mybuttonclass, 
.class2 { 
    property2: value2; 
} 

.mybuttonclass, 
.class3 { 
    property3: value3; 
} 

Oder Sie müssen zum Beispiel "Sass" oder "Less" verwenden.

Sass:

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