CSS-Auswahl nach Inline-Stilattribut

114

Gibt es einen CSS-Selektor, um dieses Element anhand seines Attributwerts für den Inline-Stil auszuwählen?

<div style='display:block'>...</div>

etwas wie

div[cssAttribute=cssValue]

— AgelessEssence
quelle

189

Das Inline- styleAttribut unterscheidet sich nicht von anderen HTML-Attributen und kann mit einem Teilstring-Attributselektor abgeglichen werden:

div[style*="display:block"]

Genau aus diesem Grund ist es jedoch äußerst zerbrechlich . Da Attributselektoren keine regulären Ausdrücke unterstützen, können Sie nur exakte Teilzeichenfolgenübereinstimmungen des Attributwerts durchführen. 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 werden keine übereinstimmenden Werte mehr angezeigt , die kein Leerzeichen enthalten, es sei denn, Sie geben alle Permutationen ad nauseum an. Wenn Sie jedoch mit einem Dokument arbeiten, in dem sich die Inline-Stildeklarationen selbst wahrscheinlich überhaupt nicht ändern, sollte es Ihnen gut gehen.

Beachten Sie auch, dass dies keinesfalls die Auswahl von Elementen anhand ihrer tatsächlich angegebenen, berechneten oder verwendeten Werte ist, wie sie im DOM wiedergegeben sind. Dies ist mit CSS-Selektoren nicht möglich.

— BoltClock
quelle

Auch wenn es erforderlich ist, schade, gibt es dafür keine echte Lösung.

— BoltClock

Wenn Sie uns sagen könnten, warum Sie dies tun müssen, können wir wahrscheinlich mehr helfen

— korrodiert

Ich werde Ihnen ein Beispiel geben, 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 automatische Vervollständigung (es gibt mehrere versteckte) anhand der Stilanzeige identifizieren, da der Code keine eindeutigen IDs oder übergeordneten Strukturen enthält - sie werden vermutlich im Rückruf an <body> ausgegeben. Aber ja, es ist zerbrechlich, wie Sie betonen.

— andersand

Ich habe festgestellt, dass es EXTREM ERFORDERLICH ist, wenn Sie die Google Übersetzungsleiste auf Ihrer Seite verwenden, da sie oben auf unserer Seite ein festes Div hinzufügt - und unser Navigationssystem ist bereits behoben. Mit dieser Technik können wir unsere Navigationsleiste verschieben, je nachdem, ob die Übersetzungsleiste sichtbar ist oder nicht. Die Übersetzungsleiste hat statische Klassen und das einzige, was sich ändert, ist der Anzeigestil.

— Jag

@andersand: Nach fast genug Kommentaren zu meiner Antwort bin ich endlich dazu gekommen, sie zu aktualisieren. Ich hatte beim Schreiben meiner ursprünglichen Antwort nicht an Selen gedacht und bin damit einverstanden, dass dies einer der bekanntesten Anwendungsfälle für Attributselektoren im Inline-Stil ist.

— BoltClock

Einschließlich ";" funktioniert besser für mich.

div[style*="display:block;"]

— Bertrand
quelle

Dies liegt daran, dass das Attribut stylegenau mit der HTML-Eigenschaft übereinstimmen muss

— RousseauAlexandre

@RousseauAlexandre Hinzufügen von ";" für den Selektor macht es keinen Unterschied, zumindest wenn ich ein Element mit ";" darin und nicht im Selektor. Solange die Zeichen und Leerzeichen identisch sind, ist es nicht erforderlich, sie einzuschließen ;.

— Maxie Berkmann