Gibt es einen CSS-Selektor für Textknoten?


173

Was ich tun möchte (natürlich nicht im IE) ist:

p:not(.list):last-child + :text {
  margin-bottom: 10px;
}

Was einem Textknoten einen Rand geben würde. (Ist das überhaupt möglich?) Wie würde ich den Textknoten mit CSS bekommen?


2
Sie können ungefähr verwenden ::first-line, obwohl dies, wie der Name schon sagt, nur für die erste Textzeile gilt. (Ich denke auch, dass nur einige Eigenschaften darauf gesetzt werden konnten)
Mark Garcia

Antworten:


114

Auf Textknoten können keine Ränder oder andere Stile angewendet werden. Daher muss sich alles, auf das der Stil angewendet werden soll, in einem Element befinden. Wenn Sie möchten, dass ein Teil des Textes in Ihrem Element anders gestaltet wird, wickeln Sie ihn beispielsweise in ein spanoder ein div.


58
Ich vermisse trotzdem verzweifelt :: vorher und :: nachher auf Textknoten.
Shabunc

6
I'm nevertheless desperately missing ::before and ::after on text nodes.Tatsächlich. Sie können nicht formatieren, aber sie nehmen auf jeden Fall content.
Synetech

12
Es ist eine durchaus vernünftige Frage, wie ein Textknoten ausgerichtet werden soll. Ich erkenne, dass das OP speziell "Rand" sagte, aber es sind andere Stile, die auf einen Textknoten angewendet werden können und die Sie möglicherweise auf einen Textknoten und nicht auf den übergeordneten Knoten anwenden möchten. Angenommen, ich wollte einen Rand unten unter dem Text. Wenn Sie diesen unteren Rand auf den Textknoten anwenden, wird das gewünschte Ergebnis erzielt. Wenn Sie ihn jedoch auf das übergeordnete Div anwenden, wird ein unterer Rand um das gesamte Div erstellt. Leider können Sie mit CSS den Textknoten nicht durch Hinzufügen von HTML-Elementen ansprechen ... zumindest ab sofort.
VKK

1
Sie können die Schriftart dafür festlegen, funktioniert sicherlich, aber jeder andere Stil wird nicht angewendet
Hamid Bahmanabady

Sie können solche Sachen nur für einen jetzt stackoverflow.com/questions/10645552/…
Fearis

50

Sie können mit CSS keine Textknoten als Ziel festlegen. Ich bin bei dir; Ich wünschte du könntest ... aber du kannst nicht :(

Wenn Sie den <span> Textknoten nicht wie von @Jacob vorgeschlagen umbrechen , können Sie stattdessen das umgebende Element angebenpadding und nicht margin:

HTML

<p id="theParagraph">The text node!</p>

CSS

p#theParagraph
{
    border: 1px solid red;
    padding-bottom: 10px;
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.