css - 如何定位具有相同类的输入和选择元素

Question

我怎么能写这个所以它针对两个元素而不用写两次

.field_with_errors input{
    color: red;
    background: #CEF6EC;
    border: 1px solid red;
}


.field_with_errors select{
    color: red;
    background: #CEF6EC;
    border: 1px solid red;
}

这不起作用

.field_with_errors select input{
    color: red;
    background: #CEF6EC;
    border: 1px solid red;
}

Answer 1

.field_with_errors select,
.field_with_errors input {
    color: red;
    background: #CEF6EC;
    border: 1px solid red;
}

多个 css 选择器必须用逗号分隔。如上所述，您必须为每个选择器重复整个选择器。

此外，通常的做法是在每个逗号后换行，以使您的 css 更具可读性 - 它不会影响结果，因此以下含义相同：

.field_with_errors select,
.field_with_errors input {

和

.field_with_errors select, .field_with_errors input {

Answer 2

.field_with_errors input,.field_with_errors select{
    color: red;
    background: #CEF6EC;
    border: 1px solid red;
}