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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3540380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:38:02  来源:igfitidea点击:

How can I apply CSS on all buttons which are present in that page?

css

提问by ashu

I have created a CSS style class:

我创建了一个 CSS 样式类:

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

How can I apply this CSS style class to all buttons which are present in the page without adding class="btn"to every button?

如何将此 CSS 样式类应用于页面中存在的所有按钮而不添加class="btn"到每个按钮?

回答by Delan Azabani

If your buttons are <input type="button">or submit, then this should do it:

如果您的按钮是<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; 
} 

Otherwise, if your buttons are <button>:

否则,如果您的按钮是<button>

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

To grab all three kinds of buttons:

抓取所有三种按钮:

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

回答by Aman

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

回答by Marc B

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

回答by Josh Sutterfield

If you don't want to explicitly set all the styles, but want to use the styles already defined in some pre-existing class (for example the bootstrap btn-default class), you could do something like this:

如果您不想显式设置所有样式,而是想使用某些预先存在的类(例如 bootstrap btn-default 类)中已经定义的样式,您可以执行以下操作:

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

In my case this was what I was looking for, although I'm sure there is some sort of caveat about doing it this way, or you'd expect it was something doable directly from CSS.

在我的情况下,这就是我正在寻找的东西,尽管我确信这样做会有一些警告,或者你会期望它可以直接从 CSS 中实现。

回答by Stuart Burrows

just a note

只是一个笔记

input[type="button"]

isn't going to work on old browsers like IE6. If that's a problem you will unfortunately need to add your class to each item.

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