Sélecteur CSS par attribut de style en ligne

114

Existe-t-il un sélecteur CSS pour sélectionner cet élément par sa valeur d'attribut de style en ligne?

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

quelque chose comme

div[cssAttribute=cssValue]

— AgelessEssence
source

191

L' styleattribut en ligne n'est pas différent de tout autre attribut HTML et peut être mis en correspondance avec un sélecteur d'attribut de sous-chaîne:

div[style*="display:block"]

C'est pour cette raison même qu'elle est extrêmement fragile . Les sélecteurs d'attributs ne prenant pas en charge les expressions régulières, vous ne pouvez effectuer que des correspondances exactes de sous-chaînes de la valeur d'attribut. Par exemple, si vous avez un espace quelque part dans la valeur d'attribut, comme ceci:

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

Il ne correspondra pas tant que vous n'aurez pas modifié votre sélecteur pour accueillir l'espace. Et puis il cessera de correspondre aux valeurs qui ne contiennent pas d'espace, à moins que vous n'incluiez toutes les permutations, ad nauseum. Mais si vous travaillez avec un document dans lequel les déclarations de style en ligne elles-mêmes sont peu susceptibles de changer du tout, tout devrait bien se passer.

Notez également qu'il ne s'agit pas du tout de sélectionner des éléments en fonction de leurs valeurs réelles spécifiées, calculées ou utilisées comme reflétées dans le DOM. Ce n'est pas possible avec les sélecteurs CSS.

— BoltClock
source

Même si c'est nécessaire, dommage, il n'y a pas de vraie solution pour cela.

— BoltClock

si vous pouviez nous dire pourquoi vous devez faire cela, nous pourrons probablement vous aider davantage

— corrodé

Je vais vous donner un exemple de quand cela est utile. J'écris un test du pilote Web Selenium et je ne peux pas / ne souhaite pas modifier le code réel du test. J'ai besoin d'identifier un autocomplétion spécifique (il y en a plusieurs cachés) par affichage de style, car le code ne fournit pas d'identifiant unique ou de structure parent - ils sont vraisemblablement vidés vers <body> dans le rappel. Mais oui, c'est fragile comme tu le dis.

— andersand

Je l'ai trouvé EXTRÊMEMENT REQUIS si vous utilisez la barre de traduction google sur votre page, car elle ajoute un div fixe en haut de notre page - et notre navigation est déjà corrigée. Cette technique nous permet de déplacer notre barre de navigation selon que la barre de traduction est visible ou non. La barre de traduction a des classes statiques et la seule chose qui change est son style d'affichage.

— Jag

@andersand: Après à peu près assez de commentaires sur ma réponse, j'ai finalement réussi à la mettre à jour. Je n'avais pas pensé à Selenium lors de la rédaction de ma réponse originale et je conviens que c'est l'un des cas d'utilisation les plus importants pour les sélecteurs d'attributs de style en ligne.

— BoltClock

Comprenant ";" fonctionne mieux pour moi.

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

— Bertrand
source

En effet, l'attribut styledoit correspondre exactement à la propriété HTML

— RousseauAlexandre

@RousseauAlexandre Ajout de ";" au sélecteur ne fait aucune différence au moins quand j'ai essayé sur un élément avec ";" dedans et non dans le sélecteur. Tant que les caractères et les espaces sont identiques, il n'est pas nécessaire d'inclure ;.

— Maxie Berkmann