Как я могу применить CSS ко всем кнопкам, которые присутствуют на этой странице?

Question

Я создал класс стилей CSS:

.btn { 
  color:#050; 
  font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
  background-color:#fed; 
  border:1px solid; 
  border-color: #696 #363 #363 #696; 
} 

Как я могу применить этот класс стилей CSS ко всем кнопкам, присутствующим на странице, без добавления class="btn" к каждой кнопке?

Answer 1

Если ваши кнопки <input type="button"> или отправить, то это должно сделать это:

input[type="button"], input[type="submit"] { 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

В противном случае, если ваши кнопки <button>:

button { 
    color:#050; 
    font: old 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
}

Чтобы захватить всетри вида кнопок:

button, input[type="button"], input[type="submit"] { 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

Answer 2

button{ 
  color:#050; 
  font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
  background-color:#fed; 
  border:1px solid; 
  border-color: #696 #363 #363 #696; 
} 

ИЛИ

input[type="button"]{ 
  color:#050; 
  font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
  background-color:#fed; 
  border:1px solid; 
  border-color: #696 #363 #363 #696; 
} 

Answer 3

input[type=submit], input[type=button], button {
   ...
}

Answer 4

Если вы не хотите явно устанавливать все стили, но хотите использовать стили, уже определенные в каком-либо ранее существующем классе (например, в классе начальной загрузки btn-default), вы можете сделать что-то вроде этого:

<script>
$("button").addClass("btn-default");
</script>

В моем случае это было то, что я искал, хотя я уверен, что есть некоторые предостережения о том, как сделать это таким образом, или вы могли бы ожидать, что это что-то выполнимое непосредственно из CSS.

Answer 5

просто заметка

input[type="button"]

не будет работать на старых браузерах, таких как IE6.Если это проблема, вам, к сожалению, нужно добавить свой класс к каждому предмету.