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

Question

看看这个JSFiddle
我想将不同的样式应用到第二个按钮.我想只有一个不同的sytax.救命.

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

我不想使用id,因为它被用于其他目的.

Answer 1

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

你可以使用'has'类来对css选择器进行特异性添加应用规则来输入带有类的按钮元素.button2:

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

<input type="button">

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