Использование разных листов CSS с одинаковыми именами правил для разных элементов документа HTML

Question

Мне нужен способ загрузить несколько таблиц стилей с одинаковыми именами правил, а затем применить их к разным элементам на странице. Возможно ли это?

Вот пример того, что я хотел бы сделать. Возьмите две таблицы стилей ниже:

style1.css:

.size{
    color: #FF6600;
    font-size: 18px;
}

style2.css:

.size{
    color: #FF0000;
    font-size: 14px;
}

Я бы хотел иметь возможность импортировать оба из них на страницу (возможно, с каким-либо идентификатором), а затем установить текст внутри одного конкретного div, чтобы использовать правила из style1.css, а другой div должен использовать правила из style2.css.

Мне нужно поступить так, потому что это позволит пользователям моего приложения загружать на страницу собственные таблицы стилей для разных виджетов. Эта схема должна работать при условии, что листы используют одну и ту же схему именования правил.

Answer 1

Ответ: нет, вы не можете сделать это таким образом. Последнее загруженное правило будет иметь приоритет.

Вы должны различать разные виджеты с различными классами или идентификаторами, и тогда у вас не будет тех же правил. #widgetB .size{ color: #FF0000; font-size: 14px; } #widgetA .size{ color: purple; font-size: 10px; }

Answer 2

Может быть, вы можете поместить каждый виджет в iframe. В этом iframe вы вызываете пользовательскую таблицу стилей для этого виджета. Таким образом, вы выиграете больше модульности, а также сможете делать то, что вы хотите напрямую, не беспокоясь о читах, чтобы обойти проблему.

Answer 3

Чтобы прямо ответить на ваш вопрос «Нет». Сам код CSS должен иметь некоторый контекст.

Что касается «это позволит пользователям моего приложения загружать пользовательские таблицы стилей для различных виджетов на странице» - то, как я это прочитал, я предлагаю что-то вроде оборачивания каждого виджета в уникальный идентификатор или подобное

Затем пользователи могут загружать таблицы стилей с небольшим контекстом, но с теми же базовыми именами, что и:

#widget-one .size { ... }

#widget-two .size { ... }

Но нужен какой-то контекст / префикс.

Answer 4

Если вы сделаете это, правило, объявленное в таблице стилей, которая загружается последней, будет применяться ко всем элементам, которым оно соответствует.

Answer 5

Может быть, вы могли бы использовать что-то вроде jQuery, чтобы удалить CSS-страницу по умолчанию и заменить ее на пользовательскую таблицу стилей, в основном меняя ее на клиентской стороне.