CSS-Stilverschachtelung - Korrekte Form?

Question

Ich habe ein Problem, wenn ich versuche, spezifische Details darüber zu finden, wie man CSS-Regeln in einem Stylesheet richtig schreibt, in dem die Klasse oder ID in vielen anderen IDs und Stilen verschachtelt ist, z. B.

.mainbody #container #header #toprightsearch .searchbox {}

Hier haben wir also eine searchbox Klasse innerhalb einer toprightsearch ID, in einer Kopf-ID, in einer Container-ID, in einer mainbody Klasse.

Aber es scheint zu funktionieren, wenn ich einige der IDs weglasse.

Was ist die correct Wie kann man diese auflisten?
Wenn ich alle Eltern einbeziehe, wird es dann spezifischer? Kann es auf verschiedenen Browsern zu Fehlern kommen, wenn ich nicht alle einbeziehe?

Für jede zusätzliche Information zu diesem Thema wären wir dankbar.

Gracias

Answer 1

.searchbox {}

Styles alles mit .searchbox

.mainbody .searchbox{}

Styles jedes .searchbox, das von einem .mainbody abstammt, direktes Kind, Enkel, vierfacher Urenkel, spielt keine Rolle.

#toprightsearch > .searchbox {}

Styles nur .searchboxes, die direkte Kinder von #toprightsearch sind

#container * .searchbox {}

Styles .searchbox's, die Enkel oder später von #container sind.

Hier finden Sie ein gutes Dokument zu diesem Thema: w3C-Selektoren

Answer 2

Wenn Sie mehr Eltern einbeziehen, erhöht sich die Spezifität des Selektors. Sie sollten keine browserübergreifenden Probleme haben, wenn Sie Eltern weglassen.

Es gibt keine correct Anzahl der aufzuführenden Elternteile; dies hängt davon ab, was Sie für Ihren Aufschlag benötigen. Wie Sie sehen, selector1 selector2 bedeutet eine selector2 auf jeder Ebene innerhalb einer selector1 und Sie können es so einstellen, wie Sie es brauchen.

In Ihrem Beispiel sollten Sie Folgendes auflisten .mainbody #container #header #toprightsearch .searchbox wenn das, was Sie mittlere ist, dass der Stil nur für .searchbox es, die sich innerhalb dieser gesamten Hierarchie befinden. Wenn Sie im Gegensatz dazu .searchboxes die unter anderen Bedingungen existieren, um den gleichen Stil zu erhalten, sollten Sie in der Hierarchie weniger restriktiv sein. Es geht nur darum, was Sie zu erreichen versuchen.

Zum Kommentar: IDs erzeugen mehr Spezifität, so dass ihr Weglassen die Spezifität Ihrer Regel weiter reduziert.

Answer 3

Die Id's sind spezifisch für die Seite. Sie verwenden also einfach

#toprightsearch {
 stylename: stylevalue;
}

Wenn Sie nach verschachtelten Klassen suchen, ist das richtige Format

.header .textBoxes {
  stylename: stylevalue;
}

Wenn Sie das genaue Kind eines Elternteils kennen, verwenden Sie das Zeichen >. Wenn Ihr Dokument also wie folgt aussehen würde:

<div class="header">
    <div class="menu">
         <input type="text" class="textBox" />
    </div>
</div>

Sie können dies verwenden:

 .header > .menu > .textBox {somestyle:somevalue;}

Das bedeutet, dass nur Elemente mit der Klasse .textBox direkt innerhalb eines Elements der Klasse .menu stehen, das sich wiederum direkt unter einem Element der Klasse .header befindet.

Answer 4

De la W3 Selektoren Dokumentation :

Descendant-Selektoren drücken eine solche Beziehung in einem Muster aus. Ein Deszendenten-Selektor besteht aus zwei oder mehr Selektoren, die durch Leerzeichen getrennt sind. Ein Nachfahrenselektor der Form "A B" passt, wenn ein Element B ein beliebiger Nachfahre eines Vorfahrenelements A ist.

Kurz gesagt, nein, Sie müssen Folgendes nicht berücksichtigen tous der übergeordneten Elemente und sollte keine Probleme mit anderen Browsern verursachen. Allerdings mit diesem Selektor:

.mainbody .searchbox {}

Die definierten Stile gelten für jedes Element mit einer Klasse von searchbox ob es direkt oder indirekt von einem Element der Klasse mainbody .

Mit dem von Ihnen vorgeschlagenen Selektor jedoch:

.mainbody #container #header #toprightsearch .searchbox {}

Die definierten Stile sind spezifischer, so dass nur Elemente, die von einem Element der Klasse mainbody dann sind die Elemente mit IDs von #container , #header , #toprightsearch in dieser Reihenfolge und die einen Klassennamen haben searchbox werden die definierten Stile angewendet.

Answer 5

Theoretisch sollte eine ID nur für ein bestimmtes Element auf einer Seite verwendet werden. Sie sollten also nur ein Element mit einer ID von toprightsearch Damit Ihr CSS funktioniert, müssen Sie also nur angeben:

#toprightsearch .searchbox {}

weil es auf Ihrer Seite nur ein einziges Element mit einer ID von toprightsearch Alle anderen Selektoren sind unnötig.

Wenn Sie auf Ihrer Seite zwei Elemente mit einer ID von toprightsearch dann ist das eine schlechte Kodierungspraxis.