Как нацеливания на определенный тег влияет на определенный CSS файл

У меня есть этот следующий код HTML5Как нацеливания на определенный тег влияет на определенный CSS файл

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>AUMC-Student Portal</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link href="css2/paper.css" rel="stylesheet" media = "screen"> 
     <link href="css2/bootstrap.css" rel="stylesheet" media = "screen"> 



     <style> 
     form{ 
      width: 300px; 
      margin: 0 auto; 
      vertical-align: middle; 
      padding-top: 15%; 
     } 

     </style> 
    </head> 

    <body> 

     <form id = "AllControls" class="Controls"> 
      <fieldset id = "fomrControl" class = "Inputs"> 
       <br> 
       <input type = "text" class = "form-control" placeholder="Username" /> 
       <br> 
       <input type = "password" class = "form-control" placeholder="Password" /> 
       <br> 
       <br> 
       <button type="submit" class="btn btn-default">Forgot</button> 
       <button type="submit" class="btn btn-primary">Login</button> 
       <br> 
      <fieldset/> 
     <form/> 
    </body> 
</html>

Я связывая два CSS файла один paper.css и другой bootstrap.css. Вот что, когда я применяю их отдельно, комментируя другой.

Теперь я хочу, чтобы мои поля ввода, чтобы иметь внешний вид, используя bootstrap.css и кнопки, чтобы иметь внешний вид, используя paper.css. но когда я включаю оба CSS-файла, он дает мне амальгаму, которую я не хочу, так как оба влияют на поля ввода и кнопки. Я попытался изменить имена классов в файлах CSS, и это сработало до некоторой степени, но это было болезненно, чтобы найти каждая строка, которая может повлиять на ваш элемент. Также я знаю, что @import в облачных стилях устарел.

Так,

Есть ли способ, чтобы ориентировать свои поля ввода и кнопки, чтобы использовать только один из этих CSS-файлов, не изменяя CSS самих файлов?

источник

2017-02-20 Ahmed Jamil

Вы можете определить свой собственный класс, а затем применить его. Поведение, которое вы видите, - это поведение таблиц стилей. –

@Tim Biegeleisen Можете ли вы немного объяснить, как это сделать? Включает ли это изменение имени класса тега или файла CSS, или я ошибаюсь в отношении того, что вы сказали. –

Попробуйте создать пользовательский класс для кнопок, а затем скопируйте код css для кнопок из файла paper.css и примените его к пользовательскому классу.

источник

2017-02-20 00:59:09 Urbine

Я вижу, что это хорошо, но в файлах CSS есть несколько разделов, которые отвечают за полную работу элемента, например, в следующей ссылке http://bootswatch.com/paper/bootstrap.css, как я полагаю найдите всю строку кодов, влияющую на тег кнопки. Это очень трудоемко. Это действительно единственный способ? –

Как нацеливания на определенный тег влияет на определенный CSS файл

ответ

Смежные вопросы