Selettore CSS per attributo di stile in linea

114

Esiste un selettore CSS per selezionare questo elemento in base al valore dell'attributo di stile inline?

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

qualcosa di simile a

div[cssAttribute=cssValue]

— AgelessEssence
fonte

191

L' styleattributo inline non è diverso da qualsiasi altro attributo HTML e può essere abbinato a un selettore di attributi di sottostringa:

div[style*="display:block"]

È proprio per questo, tuttavia, che è estremamente fragile . Poiché i selettori di attributi non supportano le espressioni regolari, è possibile eseguire solo corrispondenze di sottostringa esatte del valore dell'attributo. Ad esempio, se hai uno spazio da qualche parte nel valore dell'attributo, come questo:

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

Non corrisponderà finché non modifichi il selettore per adattare lo spazio. E poi smetterà di abbinare i valori che non contengono lo spazio, a meno che tu non includa tutte le permutazioni, fino alla nausea. Ma se stai lavorando con un documento in cui è improbabile che le dichiarazioni di stile inline cambino affatto, dovresti stare bene.

Si noti inoltre che questo non significa affatto selezionare gli elementi in base ai valori effettivi specificati, calcolati o utilizzati come riflessi nel DOM. Ciò non è possibile con i selettori CSS.

— BoltClock
fonte

Anche se è necessario, peccato, non c'è una vera soluzione per questo.

— BoltClock

se potessi dirci perché hai bisogno di farlo, probabilmente possiamo aiutare di più

— corroso l'

Ti darò un esempio di quando questo è utile. Sto scrivendo un test Selenium Web Driver e non posso / non vorrei modificare il codice effettivo nel test. Ho bisogno di identificare un completamento automatico specifico (ce ne sono diversi nascosti) dalla visualizzazione dello stile, poiché il codice non fornisce ID univoci o struttura genitore - presumibilmente vengono scaricati su <body> nel callback. Ma sì, è fragile come dici tu.

— andersand

L'ho trovato ESTREMAMENTE RICHIESTO se si utilizza la barra di traduzione di google hte sulla tua pagina poiché aggiunge un div fisso nella parte superiore della nostra pagina e il nostro nav è già corretto. Questa tecnica ci consente di spostare la nostra barra di navigazione a seconda che la barra di traduzione sia visibile o meno. La barra di traduzione ha classi statiche e l'unica cosa che cambia è il suo stile di visualizzazione.

— Jag

@andersand: Dopo quasi abbastanza commenti sulla mia risposta sono finalmente riuscito ad aggiornarla. Non avevo pensato al selenio quando ho scritto la mia risposta originale e sono d'accordo che è uno dei casi d'uso più importanti per i selettori di attributi di stile in linea.

— BoltClock

Compreso ";" funziona meglio per me.

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

— Bertrand
fonte

Questo perché l'attributo styledeve corrispondere esattamente alla proprietà HTML

— RousseauAlexandre

@RousseauAlexandre Aggiunta ";" al selettore non fa differenza almeno quando ho provato su un elemento con ";" in esso e non nel selettore. Finché i caratteri e gli spazi sono gli stessi, non è necessario includerli ;.

— Maxie Berkmann il