Gibt es einen CSS-Selektor, um dieses Element anhand seines Inline-Stilattributwerts auszuwählen?
<div style="display:block">...</div>
etwas wie
div[cssAttribute=cssValue]
CSS-Selektor nach Inline-Stilattribut
Lesezeit: 3 Minuten
8747700cookie-checkCSS-Selektor nach Inline-Stilattribut
Zeitlose Essenz
BoltClock
Die Inline style -Attribut unterscheidet sich nicht von anderen HTML-Attributen und kann mit einem Substring-Attributselektor abgeglichen werden:
div[style*="display:block"]
Genau aus diesem Grund ist es jedoch so extrem zerbrechlich. Da Attributselektoren keine regulären Ausdrücke unterstützen, können Sie nur ausführen genau Teilstring-Übereinstimmungen des Attributwerts. Wenn Sie beispielsweise irgendwo im Attributwert ein Leerzeichen haben, wie folgt:
<div style="display: block">...</div>
Es wird nicht übereinstimmen, bis Sie Ihren Selektor ändern, um den Platz aufzunehmen. Und dann wird es aufhören, Werte abzugleichen nicht das Leerzeichen enthalten, es sei denn, Sie schließen alle Permutationen bis zum Erbrechen ein. Aber wenn Sie mit einem Dokument arbeiten, in dem sich die Inline-Stildeklarationen selbst wahrscheinlich überhaupt nicht ändern werden, sollten Sie in Ordnung sein.
Beachten Sie auch, dass dies der Fall ist nicht bei allen Auswahlelementen nach ihren tatsächlich angegebenen, berechneten oder verwendeten Werten, wie sie im DOM widergespiegelt werden. Dass ist mit CSS-Selektoren nicht möglich.
-
Auch wenn es erforderlich ist, schade, dass es dafür keine wirkliche Lösung gibt.
– BoltClock
8. Dezember 2011 um 6:17 Uhr
-
Ich gebe Ihnen ein Beispiel dafür, wann dies nützlich ist. Ich schreibe einen Selenium Web Driver-Test und kann / möchte den tatsächlichen Code im Test nicht ändern. Ich muss eine bestimmte Autovervollständigung (es gibt mehrere versteckte) anhand der Stilanzeige identifizieren, da der Code keine eindeutigen IDs oder übergeordneten Strukturen bereitstellt – sie werden vermutlich im Callback in ausgegeben. Aber ja, es ist zerbrechlich, wie Sie betonen.
– andersand
26. April 2013 um 13:55 Uhr
-
Ich habe festgestellt, dass es EXTREM ERFORDERLICH ist, wenn Sie die Google Translate-Leiste auf Ihrer Seite verwenden, da sie oben auf unserer Seite ein festes Div hinzufügt – und unser Navi ist bereits festgelegt. Diese Technik ermöglicht es uns, unsere Navigationsleiste zu verschieben, je nachdem, ob die Übersetzungsleiste sichtbar ist oder nicht. Die Übersetzungsleiste hat statische Klassen und das einzige, was sich ändert, ist ihr Anzeigestil.
– Zacken
20. Mai 2014 um 13:01 Uhr
-
Der Schock, den BoltClock ausdrückt („Ich bin mir nicht sicher, warum in aller Welt Sie so etwas tun wollen“) ist unglaublich traurig. Die Frage, was auf diesem Bildschirm grün ist, ist eine Frage, auf die viele Leute vielleicht eine Antwort haben möchten. Das Versäumnis des CSSOM, einen deklarativen Regelsatz dazu zu bringen, seine Anwendung wiederum deklarativ (und fraglich) offenzulegen, ist extreme Idiokratie. Stile müssen natürlich durchsuchbar sein.
– rektide
9. November 2014 um 22:21 Uhr
-
@andersand: Nachdem ich gerade genug Kommentare zu meiner Antwort abgegeben hatte, kam ich endlich dazu, sie zu aktualisieren. Ich hatte beim Schreiben meiner ursprünglichen Antwort nicht an Selenium gedacht, und ich stimme zu, dass es einer der bekanntesten Anwendungsfälle für Attributselektoren im Inline-Stil ist.
– BoltClock
23. November 2014 um 6:42 Uhr
Bertrand
Einschließlich “;” funktioniert bei mir besser.
div[style*="display:block;"]
-
Dies liegt daran, dass das Attribut
stylemuss genau mit der HTML-Eigenschaft übereinstimmen– alexandre-rousseau
11. Juni 2019 um 12:56 Uhr
-
@RousseauAlexandre Hinzufügen von “;” zum Selektor macht keinen Unterschied, zumindest wenn ich ein Element mit “;” anprobiert habe. darin und nicht im Selektor. Solange die Zeichen und Leerzeichen gleich sind, ist es unnötig, sie einzufügen
;.– Maxie Berkmann
16. März 2020 um 14:45 Uhr
Achten Sie immer darauf, wie das Attribut in HTML geschrieben ist (Sie können es auf der Registerkarte Elemente im Browser überprüfen). Sie müssen genau denselben Wert verwenden. In meinem Fall: style="left: 100%;". Und nicht style="left:100%" oder so ähnlich.
