Как вручную применить стили из определенной таблицы стилей к элементу?

Question

У меня есть форма, которая связана с различными таблицами стилей. У меня есть две таблицы стилей, которые имеют стили для тега выбора. Так что становится противоречивым, когда я связываю обе таблицы стилей.

Например

У меня есть style1.css и style2.css, которые содержат стили для тега select. И у меня есть два тега выбора с идентификаторами select1 и select2.

Я хочу, чтобы только стиль из style1.css применялся к select1, а стили из style2.css - для select2. Как я могу это сделать?

Я не могу указать стили для этого конкретного идентификатора, потому что это повлияет и на другие теги выбора.

Как я могу заставить стили разных таблиц стилей работать только в определенном месте?

Answer 1

Вы можете использовать CSS3's :not() селектор.Например, в style2.css вы должны написать:

select:not(#select1) {
    // styling here will be applied to all selects except select1
}

Но на самом деле вы должны просто сохранить все стили для тега select в одном документе CSS.Таким образом, вы сможете легче контролировать конфликты.

Answer 2

Вы можете определить имя класса для идентификатора style1 как class="style-one", а затем определить стили, присвоив тегу !important стили элементов.Например:

.style-one{border:none !important;}

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

Answer 3

CSS работает таким образом, что последние настройки являются наиболее важными.Таким образом, вы можете сначала связать style1.css, затем style2.css и , в конце из style2.css вы можете определить стили для select1:

#select1
{
  /* styles */
}

Это не повлияет на любойдругие элементы, только select1.

Но обычно вы должны объединять стили для выбора в одной таблице стилей.