Как написать селектор CSS, выбирающий элементы, НЕ имеющие определенного атрибута? - PullRequest
0 голосов
/ 26 декабря 2018

Как написать селектор CSS, выбирающий элементы, НЕ имеющие определенного атрибута?

У меня есть 2 <div> узла следующим образом:

  • Первый:

    <div class="weEq5" style="will-change; width;">
        <button class="_35EW6">
    
  • Секунда:

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

Мне нужно выбрать <div> (с аналогичным классом) и каждый из них, которые имеютпохоже по убыванию <button>, но без атрибута style.

XPath , кажется, работает нормально, как:

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

Я ищуэквивалент CssSelector .

Испытания:

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

Я прошел следующее обсуждение, но, похоже, он отбрасывает атрибут class как:not([class]) как в:

Я искал похожие строки, заканчивающиеся на :not(attribute).

Ответы [ 4 ]

0 голосов
/ 03 января 2019

Я не понимаю, как развивалась ситуация в первую очередь, когда структура страницы требует правил CSS, чтобы знать, существует ли «style = ...» в самом документе.Или даже почему стиль = ... используется.

Атрибут style теперь старый, я полагаю, до CSS.Это также имеет приоритет над чем-либо в CSS.Этот атрибут не принимает имена классов CSS.Он принимает только нативные свойства стиля html, такие как «ширина», «высота», «шрифт» - старомодные вещи - в конечном счете, это то, к чему решает ваш CSS, независимо от того, насколько он причудлив или запутан через фреймворки: шрифт, ширина, слева, топ, плавать .. и так далее.

Используя атрибут класса (вместо стиля) в документе, вы получаете неограниченный контроль над тем, как писать умные селекторы в вашем CSS.

Например, вы можете поместить 3 класса в атрибут класса вашего div, если хотите, и сделать так, чтобы ваши селекторы применили к нему стилизацию, если 2 класса присутствуют, но не если все 3 присутствуют.Тонны гибкости, нет необходимости переопределять или использовать «style = ...» в документе вообще.

0 голосов
/ 28 декабря 2018

Я думаю, что более точный селектор CSS:

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

, потому что элемент button является дочерним по отношению к элементу div.

Надеюсь, он вам поможет!

0 голосов
/ 02 января 2019

Это код, который вы ищете:

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

Теперь давайте разберем его.У нас есть четыре селектора в этом примере:

  1. div и кнопка - они выбирают элементы HTML.Мы можем заменить его, например, селектором класса, таким как .weEq5.
  2. : not () - указывает, что мы хотим, чтобы все, что не соответствует селектору внутри скобок.
  3. [стиль] - селектор атрибутов , который очень мощный.Мы можем поместить внутрь любого другого селектора CSS, например, имена тегов html (кнопки или div), имена классов или идентификаторы.

Комбинация div:not([style]) означает, что мы хотим, чтобы все div, которые не имеютатрибут стиля.После этого у нас есть пробел, а кнопка означает, что мы хотим, чтобы все кнопки были внутри вышеуказанного селектора.

Добавление > перед кнопкой div:not([style]) > button будет выбирать только элементы кнопки, которые являются прямыми потомкамивыбранный див.Он исключит из кнопок выбора, которые находятся глубже внутри div.

0 голосов
/ 26 декабря 2018

Обычно вы пишете :not([style]) для соответствия элементу, который не имеет атрибута style, как описано здесь , в котором подчеркивается использование скобок () и [] вэтот порядок.

Но если это не работает в Selenium WebDriver, и еще хуже, если :not(style) работает точно так же, как я ожидал бы :not([style]), то это ошибка его парсера CSS-селектора, так как:not(style) на самом деле означает «не элемент style», что делает div:not(style) избыточным, поскольку элемент может быть либо div, либо style, но не оба одновременно.Если вам абсолютно не нужен селектор, я настоятельно рекомендую использовать стратегию локатора XPath вместо того, чтобы полагаться на причуды, подобные этой, с механизмом селектора CSS Selenium WebDriver, который вынуждает вас писать селекторы, которые являются неверными и не работают в других местах, которые принимают селектор.

...