如何将CSS选择器应用于具有两个类的元素

Question

是否有方法将CSS选择器(如focus(应用于具有两个类的元素？

例如：

在我的CSS文件中给定以下两个类：

.form__input:focus {
border-color: blue;
background: #ffffff;
}
.form__input-error {
color: red;
border-color: red;
}

可以添加下一个吗：

.form__input .form__input-error:focus {
color: red;
border-color: red;
background: #ffffff
}

我之所以这么问，是因为在我的具体情况下，这是行不通的。但我不确定这是由于CSS还是由于我正在执行的某些javascript。

Answer 1

如果您想选择一个有2个类的元素，例如，使用您的示例。。。

.form__input:focus {
border-color: blue;
background: #ffffff;
}
.form__input-error {
color: red;
border-color: red;
}
/* 
Note the lack of space between the classes.
You can chain as many classes as you like.
*/
.form__input.form__input-error:focus {
color: red;
border-color: red;
background: #ffffff
}