So verwenden Sie CSS-Eltern-Kind

Wenn wir an einem Front-End-Projekt arbeiten, müssen wir die übergeordnete Beziehung zwischen Elementmodulen klären, damit wir Elemente bequemer verwalten, finden und verwenden können. Lassen Sie mich Ihnen heute eine gute Einführung geben.

Um es einfach auszudrücken: CSS-Elternteil und CSS-Kindteil sind relative Begriffe. Beispielsweise wird ein DIV „A“ von einem anderen DIV „B“ umschlossen, sodass wir denken können, dass B das Elternteil von A ist Es gilt derselbe Grund.

Eltern-Kind-Beziehung oder manchmal die DIV-Verschachtelungsbeziehung wird mit der Vater-Sohn-Beziehung verglichen. Dies dient dem besseren Verständnis. Das Bild der DIV-Verschachtelungsbeziehung wird mit der Eltern-Kind-Beziehung verglichen.

, Beispiel:

DIV-CSS-Eltern-Kind-Beschreibungsbeispiel:

CSS-Code

.yangshi{...} 
.yangshi .yangshi_a{ ...} 
.yangshi .yangshi_b{ ...}

Div-Code

<div class="yangshi"> 
<div class="yangshi_a">内容a</div> 
<div class="yangshi_b">内容b</div> 
</div>

Im obigen div+css-Code können wir denken, dass das übergeordnete Element (obere Ebene) von yangshi_a yangshi ist.

Auf diese Weise können wir das CSS-Zeiger-Attribut im Div-CSS verwenden, und der endgültige CSS-Stil kann den gleichnamigen -Attributselektor haben , Aber mit unterschiedlichen Werten.

Auf diese Weise können wir anhand von .yangshi .yangshi_a erkennen, dass das übergeordnete Element von yangshi_a yangshi ist.

Ich glaube, Sie haben die Methode danach gemeistert Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website

anderen verwandten Artikeln!

Verwandte Lektüre:

So verwenden Sie das Transformationsverlaufsattribut in CSS3

Schritte zum Implementieren des Effekts der dynamischen Erstellung Schalter in CSS3

Schritte zur Optimierung von HTML5-Formularen mit CSS3

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS-Eltern-Kind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!