CSS селектор по встроенному атрибуту стиля

Есть ли селектор CSS для выбора этого элемента по значению атрибута встроенного стиля?

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

что-то вроде

div[cssAttribute=cssValue]

4 ответа

Решение

Встроенный style Атрибут не отличается от любого другого атрибута HTML и может быть сопоставлен с селектором атрибута подстроки:

div[style*="display:block"]

Именно по этой причине, однако, это чрезвычайно хрупко. Поскольку селекторы атрибутов не поддерживают регулярные выражения, вы можете выполнять только точные совпадения подстрок значения атрибута. Например, если у вас есть место где-то в значении атрибута, например так:

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

Это не будет соответствовать, пока вы не измените свой селектор, чтобы приспособить пространство. И тогда он остановит сопоставление значений, которые не содержат пробела, если вы не включите все перестановки, тошноту. Но если вы работаете с документом, в котором сами объявления встроенного стиля вряд ли будут вообще меняться, у вас все будет хорошо.

Также обратите внимание, что это вовсе не выбор элементов по их фактическим заданным, вычисленным или использованным значениям, как это отражено в DOM. Это невозможно с помощью селекторов CSS.

В том числе ";" работает лучше для меня.

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

Всегда смотрите, как атрибут написан в HTML (это можно проверить во вкладке «Элементы» в браузере). Вы должны использовать точно такое же значение. В моем случае: style="left: 100%;". И не style="left:100%"или что-то в этом роде.

Я только что проверил проект и единственное, что мне удалось найти, это точное описание класса:[style="display: block;"].

Другие вопросы по тегам