Question

查看此JSFiddle
我想将不同的风格应用于第二个按钮。我想只有一个不同的sytax。帮助

<input type="button">
<input type="button" class="button2">

我不想使用id，因为它被用于其他目的。

Answer 1

特异性是浏览器决定哪些属性值与元素最相关并且可以应用的方法。特异性仅基于由组成的匹配规则选择不同的种类。

你可以使用＆＃39; has＆＃39;来对css选择器进行特异性。 class add将规则应用于使用类.button2输入按钮元素：

＆＃13;

input[type="button"] {
  width: 500px;
  background: red;
}
[type='button'].button2 {
  width: 100px;
  background: black;
}

＆＃13;

<input type="button">

<input type="button" class="button2">

＆＃13;

另请查看Specificity。

Answer 2

<input type="button">

<input type="button" class="button2">


input[type="button"]{
    width: 500px;
    background: red;
}
input[type="button"].button2{
     width: 100px;
     background: black;

 }

小提琴：http://jsfiddle.net/0dyk2n3b/1/

Answer 3

检查一下 http://jsfiddle.net/0dyk2n3b/2/

 input.button2{
 width: 100px;
 background: black;
 }

Answer 4

Arvind的回答略有不同，但没有使用重要的内容：

＆＃13;

input[type="button"] {
  width: 500px;
  background: red;
}
input[type="button"].button2 {
  width: 100px;
  background: black ;
}

＆＃13;

<input type="button">

<input type="button" class="button2">

＆＃13;

Answer 5

是的，你可以这样做。

jsFiddle：http://jsfiddle.net/swapnilmotewar/0dyk2n3b/4/

<强> HTML：

<input type="button">
<input type="button" class="button2">

<强> CSS：

input[type="button"]{
    width: 500px;
    background: red;
}
input[type="button"].button2{
    width: 100px;
    background: green;    
}

将不同的样式应用于特定输入按钮

5 个答案: