Wie wähle ich den Urenkel eines Elements für CSS-Regeln aus?

Wie kann ich angesichts dieses HTML auswählen rt-block um das CSS zu ändern nur wenn in rt-header verschachtelt wie gezeigt?

<div id="rt-header">
    <div class="rt-container">
        <div class="rt-grid-6 rt-alpha">
            <div class="rt-grid-6 rt-omega">
                <div class="rt-block ">    // This is the occurrence I want to override
                    my html....
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

Die Klassen rt-grid-12 rt-alpha rt-omega bleiben nicht konsistent und sind manchmal ein einzelnes div, abhängig von den Gantry/LESS-Einstellungen. Wenn Sie mit den in Joomla verwendeten RT-Vorlagen vertraut sind, wissen Sie das rt-block wird durchgehend verwendet, daher kann die Klasse im Allgemeinen nicht geändert werden.

AKTUALISIEREN – zeigt eine andere Möglichkeit von HTML mit dem gleichen Bedarf:

<div id="rt-header">
    <div class="rt-container">
        <div class="rt-grid-6 rt-alpha rt-omega">
            <div class="rt-block ">    // This is the occurrence I want to override
                my html....
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

Die allgemeine CSS-Hierarchie (auf jeder verschachtelten Ebene) wird durch ein einfaches Leerzeichen angegeben

So:

#rt-header .rt-block {
    /* CSS STYLE */
}

Alles, was Sie zur Auswahl benötigen .rt-block wenn es unter ist #rt-header ist einfach (wie Marc B in den Kommentaren antwortete):

#rt-header .rt-block { /* rules here */ }

Nehmen wir für ein anderes Framework-agnostisches Beispiel an, dass Sie eine Struktur wie die folgende haben:

<div class="content">
  <section class="introduction">
    <p>Hello!</p>
  </section>
  <section class="overview">
    <p>This is an overview.</p>
  </section>
</div>

und ich wollte nur zielen <p> Tags drin <section class="introduction">, egal was das übergeordnete Element ist. Du könntest das CSS so schreiben:

.introduction p { /* rules */ }