Wie man CSS-Attributselektor mit Titel ~ = tut, der ein Leerzeichen enthalten muss?

Question

Ich habe folgenden Selektor:

.post-link[title~=Corporate] 

Jetzt brauche ich stattdessen zu wählen nur Elemente, deren Titel haben das Wort „Corporate“ nur ganz am Anfang, nicht woanders im Titel.

So habe ich zwei Alternativen:

1) einen Selektor erstellen, die erst ganz am Anfang des Titels checkes und dann andere schließlich überspringen einen Selektor folgende oder

2) schaffen, die einen Raum enthalten plus ein '|' wie:

.post-link[title~=Corporate |] 

weil in meinem Fall alle Titel beginnen mit

"Keyword |"

(Corporate | i.g.)

Aber die CSS funktioniert nicht mehr, wenn ich benutze:

.post-link[title~=Corporate |] 

ich auch versucht:

.post-link[title~=Corporate |] 

funktioniert nicht. Wie macht man das? Ich kann keine Antworten mit Google finden.

Vielen Dank!

Answer 1

Jetzt muss ich nur noch Elemente auswählen, deren Titel das Wort "Corporate" nur am Anfang haben, nicht woanders im Titel.

können Sie [title^='Corporate'] verwenden:

[title^='Corporate'] { 
 
    background: lightgreen; 
 
}

<div title='Corporate foo bar'>Test case 1</div> 
 
<div title='foo Corporate bar'>Test case 2</div> 
 
<div title='Corporate | foobar'>Test case 3</div>

Reference:

E[foo^="bar"]: eine E el Element, dessen "foo" Attributwert genau mit der Zeichenfolge "bar" beginnt.

Answer 2

Dies sollte es tun. .post-link[title|="Corporate "]

Der Operator |= entspricht dem Anfang.