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

Я создал класс стиля 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" к каждой кнопке?

Ответ 1

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

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; 
}

Ответ 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; 
}

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

просто примечание

input[type="button"]

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