CSS-селектор за атрибутом стилю inline

114

Чи є селектор CSS для вибору цього елемента за значенням атрибута стилю вбудованого?

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

щось на зразок

div[cssAttribute=cssValue]

— Безстарінність
джерело

191

Вбудований styleатрибут не відрізняється від будь-якого іншого атрибута HTML і може бути узгоджений із селектором атрибута підрядки:

div[style*="display:block"]

Саме з цієї причини він надзвичайно крихкий . Оскільки селектори атрибутів не підтримують регулярні вирази, ви можете виконувати лише точні збіги підрядків за значенням атрибута. Наприклад, якщо у значенні атрибута є пробіл десь:

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

Він не збігатиметься, доки ви не зміните свій перемикач, щоб вмістити простір. І тоді він зупинить відповідність значень, які не містять простір, якщо ви не включите усі перестановки, ad nauseum. Але якщо ви працюєте з документом, в якому самі декларації стилю вбудованої форми навряд чи зміняться, вам слід добре.

Зауважте також, що це зовсім не вибір елементів за їх фактичними заданими, обчисленими або використаними значеннями, відображеними в DOM. Це неможливо із селекторами CSS.

— BoltClock
джерело

Навіть якщо це потрібно, занадто погано, для цього немає реального рішення.

— BoltClock

якщо ви можете сказати нам, чому вам потрібно це зробити, то ми, мабуть, можемо допомогти більше

— роз’їде

Наведу приклад, коли це корисно. Я пишу тест веб-драйвера Selenium і не можу / не хотів би змінювати фактичний код у тесті. Мені потрібно визначити конкретне автозаповнення (є кілька прихованих) за допомогою відображення стилю, оскільки код не забезпечує унікальної ідентифікаційної чи батьківської структури - вони, ймовірно, скидаються на <body> у зворотному дзвінку. Але так, це неміцно, як ви зазначаєте.

— andersand

Я знайшов це НАДАГО ЗАБЕЗПЕЧЕНО, якщо на вашій сторінці використовується панель перекладу hte google, оскільки вона додає фіксований дів у верхній частині нашої сторінки - і наш навик вже виправлений. Ця методика дозволяє нам переміщувати нашу навігаційну смугу залежно від того, видно чи ні перекладацький рядок. У панелі перекладу є статичні класи, і єдине, що змінюється, - це її стиль відображення.

— Джаг

@andersand: Після майже достатньої кількості коментарів до моєї відповіді я нарешті зайнявся її оновленням. Я не думав про Селен під час написання своєї оригінальної відповіді, і я згоден, що це один із найвизначніших випадків використання для вибору атрибутів стилю вбудованого стилю.

— BoltClock

У тому числі ";" працює для мене краще.

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

— Бертран
джерело

Це тому, що атрибут styleповинен точно відповідати властивості HTML

— RousseauAlexandre

@RousseauAlexandre Додавання ";" для селектора не має значення, принаймні, коли я приміряв елемент з ";" в ньому, а не в селекторі. Поки символи та пробіли однакові, їх не потрібно включати ;.

— Максі Беркманн