Две таблицы стилей CSS меняют входной тег

Question

В настоящее время я пытаюсь включить теги bootstrap на свой сайт. Я загрузил исходный код от Github bootstrap-tags и имеет свои собственные таблицы стилей CSS. На моем текущем веб-сайте у меня есть таблица стилей, которая добавляет атрибуты к тегу HTML <input>. CSS, который поставляется вместе с исходным кодом Github, также добавляет атрибуты к тегу HTML <input>, и эти два конфликтующих стиля возвращают неожиданные результаты.

Таким образом, есть два листа типа

main.css 
bootstrap-tags.css 

У меня есть три входа

<div class="row"> 
<div class="col-sm-6"> 
<input type="text" name="name" class="form-control" placeholder="Name (Required)"> 
</div><!-- /.col --> 
</div><!-- /.row --> 

<div class="row"> 
<div class="col-sm-6"> 
<input type="email" name="email" class="form-control" placeholder="Email (Required)"> 
</div><!-- /.col --> 
</div><!-- /.row --> 

<div class="row"> 
<div class="col-sm-6"> 
<input type="text" name="subjects" class="form-control" data-role="tagsinput"> 
</div><!-- /.col --> 
</div><!-- /.row --> 

Я хочу, чтобы первые два <input> тегов, которые будут затронуты main.css, и последним <input> тега быть затронуты bootstrap-tags.css. Как я могу это достичь?

Я знаю, что я могу добавлять классы к входам, а не добавлять CSS в тег <input>, но я хочу, чтобы мой прямой CSS был привязан к тегу <input>.

Answer 1

Как решить проблему

Это технически не является ответом, потому что он не решает актуальный вопрос.

Из того, что мне сказали и что я исследовал, элемент не может решить, из какой таблицы стилей он получает свои атрибуты. Поэтому я был вынужден создать класс CSS и дал каждому атрибуту тэг !important переопределить CSS для тега <input>.