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

114

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

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

что-то вроде

div[cssAttribute=cssValue]
html css css-selectors inline-styles AgelessEssence
источник

Ответы:

192

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

div[style*="display:block"]

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

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

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

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

BoltClock
источник
1
Даже если это необходимо, к сожалению, настоящего решения для этого нет.
BoltClock
если бы вы могли сказать нам, зачем вам это нужно, мы, вероятно, могли бы помочь больше
ржавчина
9
Я приведу вам пример, когда это будет полезно. Я пишу тест Selenium Web Driver и не могу / не хочу изменять фактический код в тесте. Мне нужно идентифицировать конкретное автозаполнение (есть несколько скрытых) с помощью отображения стиля, поскольку код не предоставляет уникальный идентификатор или родительскую структуру - они предположительно сбрасываются в <body> в обратном вызове. Но да, как вы указываете, он хрупкий.
andersand
2
Я обнаружил, что это КРАЙНЕ НЕОБХОДИМО при использовании панели перевода Google на вашей странице, так как она добавляет фиксированный div в верхнюю часть нашей страницы - и наша навигация уже исправлена. Этот метод позволяет нам перемещать нашу навигационную панель в зависимости от того, отображается ли панель перевода или нет. Панель перевода имеет статические классы, и единственное, что меняется, - это стиль отображения.
Jag
3
@andersand: После достаточного количества комментариев к моему ответу я наконец добрался до его обновления. Я не думал о Selenium, когда писал свой исходный ответ, и я согласен, что это один из самых известных вариантов использования селекторов атрибутов встроенного стиля.
BoltClock
3

Включая ";" у меня работает лучше.

div[style*="display:block;"]
Bertrand
источник
4
Это потому, что атрибут styleдолжен точно соответствовать свойству HTML
RousseauAlexandre
@RousseauAlexandre Добавление ";" к селектору не имеет значения, по крайней мере, когда я попробовал элемент с ";" в нем, а не в селекторе. Пока символы и пробелы совпадают, включать их необязательно ;.
Макси Беркманн,