hinzufügen einer css-Klasse auf mehrere Elemente

Habe ich eine CSS Klasse namens 'button', und wandte Sie auf alle meine INPUT-tags, indem Sie einfach mit :

.button input
{
//css stuff here
}

<p class="button">
<input type="submit" Name='submit' value="Confirm Selection"/>
</p>

welche gut funktioniert, aber ich habe dann Hinzugefügt, ein weiterer button, aber das ist nicht Teil meiner form, es ist nur ein Platz Halter ist trigerred mit javascript und öffnet ein iFrame. Da ich wollte, dass es genauso aussieht wie alle 'echten' Tasten die ich verwendet die gleiche Klasse.

<p class="button" id="AddCustomer">
<a href="AddCustomer.php">Add Customer</a>
</p>

Das Problem, das ich hatte war, dass wenn ich die Klasse als .button input die <a> tag nicht sehen. Wenn ich entfernt die input Teil der CSS-alle meine Knöpfe habe grauen Quadrate in der Mitte.

Also entschloss ich mich es mit .button input,a

Dies funktionierte gut. . . Bis ich sah eine andere Seite, und fand alle meine <a> - tags wurden jetzt formatiert mit der "button" - Klasse, obwohl Sie nicht über diese Klasse angewendet.

Meine Frage ist dann, wie kann ich die gleichen CSS-Klasse <input> und <a> - tags zur gleichen Zeit, aber nur, wenn ich explizit Hinzugefügt class="button".

InformationsquelleAutor IGGt | 2012-09-28
  1. 49

    Müssen Sie qualifizieren die a Teil des Selektors zu:

    .button input, .button a {
    //css stuff here
}

    Grundsätzlich, wenn Sie das Komma verwenden, um erstellen Sie eine Gruppe von Selektoren, jeden einzelnen Selektor ist völlig unabhängig. Es gibt keine Beziehung zwischen Ihnen.

    Ihre ursprüngliche Auswahl daher aufeinander abgestimmt "werden alle Elemente des Typ 'input', die Nachfahren eines Elements mit der Klasse Namen 'button', und alle Elemente des Typs 'a'".

    InformationsquelleAutor James Allardice
  2. 7

    Versuchen Sie es mit:

    .button input, .button a {
    //css stuff
}

    Lesen Sie außerdem, bis auf CSS.

    Edit: Wenn es nach mir ginge, würde ich hinzufügen, der button-Klasse für das element, nicht auf die übergeordneten Tags.
    Etwa so:

    HTML:

    <a href="#" class='button'>BUTTON TEXT</a>
<input type="submit" class='button' value='buttontext' />

    CSS:

    .button {
    //css stuff
}

    Für spezielle css-Zeug verwenden:

    input.button {
    //css stuff
}
a.button {
    //css stuff
}
    InformationsquelleAutor besluitloos
  3. 2
    .button input,
.button a {
    ...
}
    InformationsquelleAutor scoota269
  4. 1

    versuchen Sie dies:

    .button input, .button a {
//css here
}

    Gilt der Stil für alle a-tags verschachtelte innerhalb von <p class="button"></p>

    InformationsquelleAutor Dan
Schreibe einen Kommentar