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>

如果我从[type=text]规则中删除input，它会解决第二个文本区域的问题，但它也会将样式应用于复选框（我不想要这样做。）

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

是否有某种方法可以使[type=text]规则不那么具体，同时仍然只应用于文本输入，以便它不会优先应用于直接类规则？

Answer 1

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

每个id有100分，class有10分，tag有1分。因此，如果您使用id + class，它会更强大，风格应该适用

检查此stack overflow问题和答案，以便更好地理解。

Answer 2

我刚刚发现我可以通过复制类来人为地提高规则的特异性。而不是.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>

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

2 个答案: