CSS Style Nesting - Richtige Form?

Ich habe ein Problem beim Versuch, spezifische Details zum korrekten Schreiben von CSS-Regeln in einem Stylesheet zu finden, wo die Klasse oder ID in viele andere IDs und Stile geschachtelt ist, z.CSS Style Nesting - Richtige Form?

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

Also hier haben wir eine searchbox Klasse innerhalb einer toprightsearch ID in einem Header-ID in einem Container-ID in einer mainbody Klasse.

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

Was ist die richtige Art der Auflistung dieser?
Wenn ich alle Eltern einbeziehe macht es das genauer? Kann es Fehler bei verschiedenen Browsern geben, wenn ich nicht alle einbeziehe?

Und alle weiteren Informationen zu diesem Thema würden uns freuen.

Dank

Quelle

2009-06-07 user103219

Wenn Sie mehr Eltern einschließen, wird die Selektorspezifität erhöht. Sie sollten keine browserübergreifenden Probleme haben, die Eltern auslassen.

Es gibt keine korrekte Anzahl der zu listen; Es hängt davon ab, was Sie für Ihr Markup benötigen. Wie Sie sehen, bedeutet selector1 selector2 eine selector2 auf jeder Ebene innerhalb einer selector1, und Sie können das für das Verhalten einstellen, das Sie brauchen.

In Ihrem Beispiel sollten Sie .mainbody #container #header #toprightsearch .searchbox Liste ob das, was Sie bedeuten für den Stil ist nur zu .searchbox es gelten, die innerhalb dieser gesamten Hierarchie sind. Wenn Sie im Gegensatz dazu .searchboxes möchten, die unter Bedingungen existieren, um den gleichen Stil zu erhalten, sollten Sie in der Hierarchie weniger restriktiv sein. Es geht nur darum, was Sie erreichen wollen.

Re Kommentar: IDs produzieren mehr Spezifität, so dass sie die Regel Spezifität mehr zu reduzieren.

Quelle

2009-06-07 16:49:06 chaos

Ok - und gibt es einen Unterschied beim Auslassen von IDs gegen Klassen? – user103219

Der folgende Code tut, was es sagt (zumindest in Firefox). es färbt die Eingabe rot

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Untitled Document</title> 
<style type="text/css"> 
.mainbody #container #header #toprightsearch .searchbox { 
    background-color:red; 
} 
</style> 
</head> 

<body class="mainbody"> 

<div id="container"> 
    <div id="header"> 
     <div id="toprightsearch"> 
      <input type="text" class="searchbox" /> 
     </div> 
    </div> 

</div> 
</body> 
</html>

Ich glaube, Sie sehen sollten, wenn es etwas falsch gelaufen ist in den Klassen und die ID-Schreibweise.

Quelle

2009-06-07 16:45:29 jao

danke, aber ich habe kein Problem damit es funktioniert. Mir ist gerade aufgefallen, dass es manchmal funktioniert, wenn ich Eltern-IDs und Klassen weglasse.Also ich suche nach dem richtigen Weg, Regeln aufzulisten. – user103219

Wer es herunterfährt, hat Probleme. Das war eine sehr gute Antwort auf die Frage, die sich anhörte, als ob Razass gefragt hätte. – Chuck

Die Frage war, warum Sie einige der Kombinatoren weglassen können und immer noch das gleiche Ergebnis bekommen - nicht eine Frage "das ist kaputt", sondern ein "warum funktioniert das immer noch?" Frage. Es wurde wahrscheinlich abgelehnt, weil es so aussieht, als ob jao die Frage nicht sorgfältig gelesen hätte (ich habe das jedoch nicht abgestimmt) –

Vom W3 Selectors Documentation:

Nachfahrenselektoren auszudrücken, eine solche Beziehung in einem Muster. Ein Nachkommenselektor besteht aus zwei oder mehr Selektoren, die durch Leerraum getrennt sind. Ein Nachkomme Selektor der Form „AB“ entspricht, wenn ein Element B ein beliebiger Nachfahre einiger Vorfahren Element A. ist

Also kurz gesagt, nein Sie müssen nicht enthalten alle der Elternelemente und sollte keine Cross-Browser-Probleme verursachen.Doch mit diesem Selektor:

.mainbody .searchbox {}

Die definierten Stile auf jedes Element mit einer Klasse von searchbox gelten, ob es mit Klasse mainbody direkt oder indirekt von einem Elemente absteigt.

Mit Ihrem Vorschlag Selektor jedoch:

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

Die Stile definiert sind spezifischer, und so nur Elemente, die aus einem Element mit Klasse absteigen mainbody, dann werden die Elemente mit IDs von #container, #header, #toprightsearch in In dieser Reihenfolge und mit dem Klassennamen searchbox werden die definierten Stile angewendet.

Quelle

2009-06-07 16:57:55

.searchbox {}

Styles etwas mit .searchbox

.mainbody .searchbox{}

Styles jede .searchbox, die von jedem .mainbody, Direkt Kinder, Enkel, Urenkel vervierfachen absteigt, keine Rolle spielt.

#toprightsearch > .searchbox {}

Styles nur .searchboxes, die direkte Kinder von #toprightsearch

#container * .searchbox {}

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

Hier ist ein gutes Dokument zum Thema: w3C selectors

Quelle

2009-06-07 17:00:18

IDs sind auf der Seite spezifisch. Also würden Sie nur

verwenden

#toprightsearch { 
stylename: stylevalue; 
}

Wenn Ihr für verschachtelte Klassen suchen, dann das richtige Format ist

.header .textBoxes { 
    stylename: stylevalue; 
}

Wenn Sie die genaue Kind von einem Elternteil wissen, dann verwenden Sie das Zeichen>. Also, wenn Ihr Dokument wie das war:

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

können Sie verwenden:

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

Diese nur Artikel mit einem .textBox Klasse bedeutet direkt innerhalb eines .menu Klasse Element, das sich unten ein direkt ist Element mit einer Klasse von .header.

Quelle

2012-08-20 20:48:25 David

Theoretisch sollte eine ID nur für einen bestimmten Artikel auf einer Seite verwendet werden. Sie sollten also nur ein Element haben mit der ID toprightsearch so für Ihre CSS, Sie brauchen nur, um anzuzeigen:

toprightsearch .searchbox {}

weil es nur einen Punkt auf Ihrer Seite mit der ID toprightsearch ist, alle anderen Selektoren nicht notwendig.

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

Quelle

2017-10-24 19:08:33 Neptune704

CSS Style Nesting - Richtige Form?

Antwort

Verwandte Themen