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

Lesezeit: 2 Minuten

Benutzeravatar von GDP
BIP

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>

  • #rt-header .rt-container .rt-grid-6 .rt-grid-6 .rt-block ?

    – Andreas Matthäus

    17. Juni 2014 um 16:27 Uhr

  • Möchten Sie die Klasse .rt-block formatieren oder den .rt-header nur formatieren, wenn rt-block vorhanden ist?

    – Michael

    17. Juni 2014 um 16:28 Uhr

  • #rt-header .rt-block ist alles, was Sie brauchen, es sei denn, Sie benötigen auch eines dieser Raster-/Alpha-/Omega-Bits.

    – Markus B

    17. Juni 2014 um 16:28 Uhr

  • @MarcB das habe ich mir auch gedacht.

    – Michael

    17. Juni 2014 um 16:29 Uhr

  • .rt-header .rt-block – Dadurch werden alle rt-Blöcke formatiert, die Nachkommen von rt-header sind. was in Ordnung ist, wenn es nur einen gibt. Wenn es mehr als einen gibt, müssen Sie mit der Auswahlliste genauer werden

    – fnostro

    17. Juni 2014 um 16:31 Uhr

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

So:

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

  • Die Zauberei von CSS …. und ein @#$% Tippfehler … Ich habe mit .rt-header .rt-block gekämpft !!!! Danke, dass du frische Augen erzwingst!

    – BIP

    17. Juni 2014 um 16:39 Uhr

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 */ }

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

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy