:valid 伪类比后面定义的自定义类具有更高的优先级

Question

稍后定义的 CSS 样式应该具有更高的优先级（如果选择器具有相同的强度）。 例如：

/* Let's make it red */
h1 {
  color: red;
}

/* Well... actually blue */
h1 {
  color: blue;
}

<h1>Hello World</h1>

我原以为input:valid 和input:invalid 会发生同样的事情，但似乎input:valid 比input.is-valid 更强（自定义类稍后 /em>)。

这是一个例子：

$("button").click(function () {
	$("input").addClass("is-invalid")
})

input:invalid {
  border: 2px solid red;
}

input:valid {
  border: 2px solid green;
}

.is-invalid {
  /* Without adding !important, this isn't applied */
  border: 2px solid orange !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" required>
<button>Run custom validation and declare it .is-invalid</button>

因此，如果我们不将 !important 添加到 .is-invalid 类中，input:valid 和 input:invalid 仍将具有更高的优先级。

我应该如何解决这个问题？它是浏览器错误/功能吗？

Answer 1

这与选择器的优先级有关：.is-invalid 将比 input:valid 更重要。