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

OR

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

如果您不想显式设置所有样式，但想要使用已在某些预先存在的类中定义的样式（例如bootstrap btn-default类），则可以执行以下操作：

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

在我的情况下，这就是我所寻找的，虽然我确定有一些关于这样做的警告，或者你期望它可以直接从CSS中做到。

Answer 5

只是一个注释

input[type="button"]

不适用于像IE6这样的旧浏览器。如果这是一个问题，您将很遗憾地需要将您的课程添加到每个项目中。

如何在该页面中的所有按钮上应用CSS？

5 个答案: