web-dev-qa-db-fra.com

Comment écrire un sélecteur CSS en sélectionnant des éléments n'ayant pas un certain attribut?

Comment écrire un sélecteur CSS en sélectionnant des éléments n'ayant pas un certain attribut?

J'ai 2 nœuds <div> Comme suit:

  • Premier:

    <div class="weEq5" style="will-change; width;">
    <button class="_35EW6">

  • Seconde:

    <div class="weEq5">
    <button class="_35EW6">

J'ai besoin de sélectionner le <div> (Avec la classe similaire) et chacun d'eux qui a un similaire décroissant <button> mais sans l'attribut style.

XPath semble fonctionner correctement car:

//div[@class and not (@style)]/button

Je recherche un équivalent CssSelector .

Essais:

div[class :not(style)]>button (doesn't works).

J'ai parcouru la discussion suivante, mais ils semblent ignorer l'attribut de classe comme :not([class]) comme dans:

Je cherchais dans des lignes similaires se terminant par :not(attribute).

seleniumselenium-webdrivercss-selectorswebdriver
10
DebanjanB

Je pense que le sélecteur CSS plus précis est:

div[class]:not([style])>button

car l'élément button est un enfant de l'élément div.

J'espère que cela vous aide!

9
Ratmir Asanov

C'est le code que vous recherchez:

div:not([style]) button{
  background-color: red;
}

Maintenant, décomposons-le. Nous avons quatre sélecteurs dans cet exemple:

  1. div et bouton - ces éléments html sélectionnés. Nous pouvons le remplacer par exemple par un sélecteur de classe comme .weEq5.
  2. : not () - indique que nous voulons tout ce qui n'est pas qualifié de sélecteur à l'intérieur des crochets.
  3. [style] - un sélecteur d'attribut qui est très puissant. Nous pouvons placer à l'intérieur aucun autre sélecteur css comme les noms de balises html (bouton ou div), les noms de classe ou les identifiants.

La combinaison de div:not([style]) signifie que nous voulons toutes les divs qui n'ont pas d'attribut style. Après quoi, nous avons un espace et un bouton signifie que nous voulons tous les boutons qui sont à l'intérieur du sélecteur ci-dessus.

L'ajout d'un > Avant le bouton div:not([style]) > button ne sélectionnera que les éléments du bouton qui sont les enfants directs du div sélectionné. Il exclura des boutons de sélection plus profonds à l'intérieur du div.

9
Adam Genshaft

Normalement, vous écrivez :not([style]) pour correspondre à un élément qui n'a pas d'attribut style, comme décrit ici qui met l'accent sur l'utilisation des deux () et [] entre crochets, dans cet ordre.

Mais si cela ne fonctionne pas dans Selenium WebDriver, et pire encore si :not(style) fonctionne exactement comme je m'attendrais à ce que :not([style]) fonctionne, alors c'est un bogue avec son analyseur de sélecteur CSS, car :not(style) signifie en fait "pas un élément style", ce qui rend div:not(style) redondant car un élément ne peut être qu'un div ou un style mais pas les deux en même temps. À moins que vous n'ayez absolument besoin d'un sélecteur, je recommande fortement d'utiliser la stratégie de localisateur XPath au lieu de compter sur des caprices comme celui-ci avec le moteur de sélecteur CSS de Selenium WebDriver qui vous oblige à écrire des sélecteurs qui sont tous deux incorrects et ne fonctionnent nulle part ailleurs qui accepte un sélecteur.

3
BoltClock

Je ne comprends pas comment la situation s'est développée en premier lieu, où la structure de la page nécessite que les règles CSS sachent si "style = ..." existe dans le document lui-même. Ou même pourquoi le style = ... est utilisé.

L'attribut style est désormais old-school, pre-CSS je crois. Il a également priorité sur tout ce qui se trouve dans le CSS. Cet attribut n'accepte pas les noms de classe CSS. Il n'accepte que les propriétés de style html natives comme "width", "height", "font" - des trucs old-school - en fin de compte, c'est ce que votre CSS résout, peu importe à quel point il est sophistiqué ou obscurci par le biais de frameworks: police, largeur, gauche , top, float .. et ainsi de suite.

En utilisant l'attribut class (au lieu du style) dans le document, vous obtenez un contrôle infini à partir duquel écrire des sélecteurs intelligents dans votre CSS.

Vous pouvez mettre 3 classes dans l'attribut class de votre div par exemple, si vous le souhaitez, et demander à vos sélecteurs de lui appliquer un style si 2 des classes sont présentes mais pas si toutes les 3 sont là. Des tonnes de flexibilité, pas besoin de remplacer ou d'utiliser "style = ..." dans le document.

2
John Fantastico