将 CSS 颜色应用于文本输入，但仍然可以使用 class 覆盖它

Question

我正在尝试弄清楚如何为仍然可以覆盖的文本输入指定默认样式。在这种情况下，我希望第二个输入具有红色背景，但它与第一个输入具有相同的背景。

input[type=text] {
  box-sizing: border-box;
  width: 100%;
  color: white;
  background: #99C;
}

.error {
  color: white;
  background: red;
  padding: 0.5em;
}

<input type=text value=XYZZY><br>
<input type=checkbox> XYZZY<br>
<input type=text class=error value=XYZZY><br>
<div class=error>XYZZY</div>

如果我从 input 规则中删除 [type=text] 它会修复第二个文本区域的问题，但它也会使样式应用于复选框（我不希望这样） .)

我可以将 .error 规则更改为 .error, input.error，但我不想对每个 class 我可能想要应用到文本输入的规则都这样做。

有没有什么方法可以让 [type=text] 规则不那么具体，同时仍然只适用于文本输入，这样它就不会优先于直接 class 规则应用？

Answer 1

我刚刚发现我可以通过复制 class 人为地增加规则的特异性。我可以写 .error.error 而不是 .error。这似乎允许规则比 [type=text] 规则更具体，同时仍然允许以理智的方式覆盖它：

input[type=text] {
  box-sizing: border-box;
  width: 100%;
  color: white;
  background: #99C;
}

.error.error {
  color: white;
  background: red;
  padding: 0.5em;
}

.container .error {
  background: orange;
}

<input type=text value=XYZZY><br>
<input type=checkbox> XYZZY<br>
<input type=text class=error value=XYZZY><br>
<div class=error>XYZZY</div>
<div class=container><div class=error>XYZZY</div></div>

Answer 2

你应该为这些使用一个包装器，这样你就可以使用 wrapper id 和 classname 来获得这个 div 并且它将是一个更强大的 css 选择器。使用这个 website 来计算哪个选择器更强。

每个id有100分，class有10分，tag有1分。所以如果你使用 id + class 它会更强大并且样式应该适用

检查此问答以更好地理解。

将 CSS 颜色应用于文本输入，但仍然可以使用 class 覆盖它

Applying CSS color to text input but still be able to override it with a class

css

css-specificity