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

Question

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

Например

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

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

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

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

Answer 1

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

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

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

Answer 2

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

#select1 
{ 
    /* styles */ 
} 

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

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

Answer 3

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

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

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