如何覆盖CSS选择器？

Question

我的页面包含一个遗留css文件，它定义了:invalid伪类的样式。我想使用此文件中的一些样式，但我不希望invalid输入默认为红色，我希望输入字段使用旧文件中定义的输入字段的默认样式。

legacy.css

input:invalid {
  background-color: #F00
}

有没有办法覆盖legacy.css中定义的样式，并强制它使用文件中的其他样式？是否有更好的选择来接近这个？

my.css

input:invalid {
  // super input:valid
}

Answer 1

如果您的CSS在旧版之后加载，它将优先考虑，否则，只需添加！对您的风格很重要

input:invalid {
  background-color: #FF00 !important
}

Answer 2

您是否尝试使用背景颜色的初始值将背景颜色设置为默认值？

input:invalid{
    background-color: initial;
}

如果css文件“legacy.css”具有此选择器的某种样式，则它们不会正常修改

Answer 3

使用!important;中的legacy.css覆盖my.css中的选择器。

或

使my.css中的选择器更加具体，以便它比legacy.css中的选择器更重。这称为特异性。有关此here

的更多信息

Answer 4

您可以使用intitial作为属性值。

  

初始CSS关键字将属性的初始值应用于元素。

只需确保您的选择器在原始选择器后显示为。

input:invalid {
  background-color: #F00
}

input:invalid {
  background-color: initial;
}

<input type="email" name="email" required>

使用!important时，人为地增加了属性权重（不完全是特异性，但相似）。我会避免使用!important，因为通常是不良做法，此处不需要。