Alle Elemente auf Blockebene mit CSS auswählen

Gibt es eine einfache Möglichkeit, alle Elemente auf Blockebene mit CSS auszuwählen?Alle Elemente auf Blockebene mit CSS auswählen

Ich mag im Hauptinhaltsbereich von meiner Seite

Ich habe Gerade jetzt zwischen allen Block-Level-Elementen am 1.5 em Rand setze Code wie:

#wrapper .content p, #wrapper .content ul, #wrapper .content div, #wrapper .content ol, #wrapper .content blockquote, #wrapper .content table {margin-top: 1.5em;} 

#wrapper .content p:first-child, #wrapper .content ul:first-child, #wrapper .content div:first-child, #wrapper .content ol:first-child, #wrapper .content blockquote:first-child, #wrapper .content table:first-child {margin-top: 1.5em;}

, die einen königlichen Schmerz in der ist zu lesen oder zu halten hinten ...

ich mag es mit etwas ersetzen, wie:

#wrapper .content *:block + *:block {margin-top: 1.5em;}

Ist das möglich?

Ich kann * + * nicht verwenden, weil das auch Inline-Elemente, Tabellenzellen usw. fangen wird, und ich möchte nicht zufällige Ränder in der Mitte von Absätzen angewendet werden. Ich kann auch nicht #wrapper .content > * verwenden, weil dann verschachtelt wird div usw.

Quelle

2015-04-08 Jay Irvine

Ich denke, Inline-Elemente werden Ränder ignorieren, nicht? –

@George Garchagudashvili: Nicht genau. Vertikale Ränder bei Inline-Elementen können sich auf Grundlinienberechnungen auswirken, was katastrophale Auswirkungen auf alle Teile des Layouts haben kann, die auf Inline-Blöcken oder -Tabellen basieren. – BoltClock

Ihre Anforderung ist seltsam, aber nicht unmöglich. Ich würde eher vorschlagen, dass Sie den Elementen bestimmte Elemente zuweisen, für die Sie einen "Rand" benötigen, oder wenn Sie sicher sind, alle Blockelemente anzusteuern, als sie besser in Ihrem Stylesheet aufzulisten und ihnen einen Rand zuzuweisen –

Dies ist nicht möglich mit CSS; Sie können ein Element nicht basierend auf einer seiner CSS-Eigenschaften auswählen. Sie müssen JavaScript verwenden, um alle Elemente mit etwa getComputedStyle oder etwas ähnlichem auszuwählen, und dann eine Skriptlogik basierend auf dem, was gefunden wird, ausführen.

Das nächste, was Sie in CSS erreichen können, ist HTML Attribute; Dinge wie href oder title.

Quelle

2015-04-08 06:04:34 TylerH

@Tylerh Antwort ist richtig, es ist nicht möglich, in reiner CSS in der Art zu arbeiten, die Sie verlangen.

Eine mögliche Abhilfe mit CSS ist eine generische CSS-Klasse erstellen Sie Ihre Block-Level-Elemente wie .block-element

zu handhaben und dann mit

#wrapper .content .block-element { margin-top: 1.5em; }

Quelle

2015-04-08 06:49:21 anderssonola

Ich würde lieber alle Block-Level-Elemente im Stylesheet auflisten, anstatt eine Block-Element-Klasse zu einem offensichtlichen Block-Level-Element hinzuzufügen ... –

@ mr-alien, und Sie können das tun. Ich würde sagen, abhängig von Ihrem Markup würde ".block-element" in den meisten meiner eigenen Implementierungen eine Gitterzeile oder einen Komponenten-Wrapper darstellen. Aber alles hängt davon ab, wie Markup und CSS strukturiert sind. – anderssonola

-1

Gibt es einen einfachen Weg, um die Marge Styling gilt alle Elemente auf Blockebene mit CSS auswählen?

Standardmäßig ignorieren die blockfreien Elemente die Ränder. Also hast du auf deine Frage geantwortet.

Quelle

2015-04-08 07:16:41 n1kkou

Nicht wahr. Siehe die Kommentare zu der Frage. – BoltClock

Das ist nicht wahr .. http://jsfiddle.net/mr_alien/tLbg9e75/ –

Beide von Ihnen ignorieren den Kontext. Go Einfügen (wie vom Autor angefordert) Rand oben und unten. Sehen Sie, ob die Ränder ignoriert werden. Und übrigens nett für dich @BoltClock, du hast viele XP und du weißt nicht wovon du sprichst, Einen schönen Tag! :) – n1kkou

Alle Elemente auf Blockebene mit CSS auswählen

Antwort

Verwandte Themen