Frage

Beim Üben verschiedener Szenarien, in denen CSS3 Pseudo-Klassen und Selektoren nützlich sein könnte, ich auf etwas lief ich kann einfach nicht herausfinden!

Hier ist die Situation. Ich mag die :first-of-type::first-letter des ersten nicht leeren Absatzes für einen Block von Text ändern. Ich bin nicht sicher, dass Pseudoklassen obwohl gestapelt werden können. Hier ist, was ich habe kommen mit (nicht funktioniert, natürlich)

.article-body > p:not(:empty):first-of-type::first-letter { ... }

In Anbetracht der folgenden Markup:

<div class="article-body">
    <p></p>
    <p>The "T" in this paragraph should be the one affected.</p>
</div>

Die einzige Vermutung ich mit oben kommen kann ist, dass die Pseudo-Klassen (dh;: nicht () und: first-of-Typ) nicht übereinander gestapelt werden. Das ist seltsam, da Sie Pseudo-Elemente auf einander und andere Pseudo-Klassen stapeln ...

Alle Ideen, wie kann dies erreicht werden?

War es hilfreich?

Lösung

:first-of-type wählt den ersten p, wie der Name schon sagt, nicht das erste nicht-leere p, wie Sie möchten.

Sie stapeln ganz gut, aber :first-of-type arbeiten rein auf dem Tag (d-Typ), nicht auf dem vorhergehenden komplexen Selektor. So landen Sie nur für den ersten p suchen, und dass die erste Absatz soll auch nicht leer sein. Und das gibt es nicht.

Unter der Annahme, leere Absätze im Text erscheinen könnte, und Sie wollen nur der erste, nicht-leeren Absatz betroffen sein, ich glaube nicht, dass es möglich ist, dies zu tun mit nur einem Selektor. Das ist das Beste, was ich mit oben kommen kann:

p:first-of-type::first-letter,
p:empty + p::first-letter { text-transform: uppercase; /* ... */ }

p:not(:empty) ~ p::first-letter { text-transform: inherit; /* reset */ }

Das wird die CSS nur auf den ersten nicht-leeren Abschnitt gilt (na ja, und mit einem ersten leeren Absatz, aber es wird nichts tun, dann sowieso).

Andere Tipps

Das Entfernen der leeren Absatz Ursachen

.article-body > p:first-of-type::first-letter { ... }

richtig verhalten. Gibt es einen Grund, dass der leere Absatz muss es sein? Können Sie den Abstand des ersten Absatzes auf Konto für die leere ändern nicht dort zu sein?

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top