2017-10-24 2 views
4

Ich möchte einen CSS-Selektor, der die <code> in matches:Ist es möglich, Elemente auszuwählen, denen kein Text vorangestellt ist?

<p><code>foo</code> bar</p> 

aber nicht die <code> in:

<p>foo <code>bar</code></p> 

code:first-child funktioniert nicht. Es entspricht beiden.

Fragen nur, weil ich nicht denke, dass es möglich ist.

Ich dachte, ich würde der Gemeinde eine Chance geben, bevor ich aufhöre.


bearbeiten - Leute halten diese Kennzeichnung als Duplikat, so lassen Sie mich klar sein: wenn die aktuelle Top-Antwort richtig ist dann die Antwort auf die Frage hat Sie sich auf die gleiche Ursache, aber das tut mach es nicht die gleiche Frage. Es ist durchaus möglich, dass sich die Antworten auf die beiden Fragen unterscheiden - oder wenn nicht, ist das "Warum" nur eine Antwort auf diese Frage, nicht diese.

+0

Können Sie einfach den restlichen Text in einem Bereich wie folgt einwickeln:

foobar

? Dann würde Ihr Selektorcode: First-Child funktionieren. – deadfishli

+1

Ich denke, das ist der springende Punkt der Frage, das nicht zu tun. Wenn Sie es umbrechen würden, könnten Sie einen ': last-of-type' machen. Aber das ist nicht die Frage hier. Ich denke, das ist mit reinem CSS nicht möglich. – lumio

+1

Mögliches Duplikat von [Gibt es einen CSS-Selektor für Textknoten?] (Https://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes) – jfeferman

Antwort

3

Es gibt zwei Elemente in Ihrem Absatz.

<code>bar</code> 

und

<anonymous-inline-box>foo</anonymous-inline-box> 

Anonymous Inline-Elemente werden automatisch generiert und nicht durch CSS gezielt werden kann. Daher gibt es keine Möglichkeit, Stile auf das Element code relativ zum Textknoten anzuwenden.

Wenn das Umbrechen des Texts in einem tatsächlichen Element keine Option ist, versuchen Sie es mit JavaScript.

Hier sind einige weitere Details aus der spec:

9.2.2.1 Anonymous inline boxes

Jeder Text, der direkt in einem Block Containerelement enthalten ist, muss als anonyme Inline-Element behandelt werden.

Solche anonymen Inline-Boxen erben vererbbare Eigenschaften von ihrer übergeordneten Box.

0

Selektoren unterscheidet nicht zwischen einem nur untergeordneten Elemente machen, dass der einzige Kind Knoten ist seiner Eltern, und ein einziges Kind-Element, das einen oder mehrere Geschwister Textknoten hat. In beiden Fällen entspricht das untergeordnete Element :only-child; Die Textknoten sind im letzteren Fall nicht signifikant.

Verwandte Themen