在css选择器中为属性指定两个或多个值的简洁方法

Question

我有一个CSS选择器如下：

#foo input[type=number].form-control, #foo input[type=text].form-control

是否有更简洁的语法，如：

#foo input[type=number,text].form-control

这不起作用，但做了类似的事情吗？

Answer 1

不，我担心没有。虽然在示例中属性选择器中没有枚举值的提议，但Selectors 4's :matches()至少允许您在单个复合选择器中使用OR两个属性选择器：

#foo input:matches([type=number], [type=text]).form-control

也就是说，在可预见的将来，您可能不得不坚持使用当前详细的语法，直到浏览器开始实现:matches()。

Answer 2

不是没有用于简单的CSS，但使用像LESS或SASS这样的预处理器可以嵌套属性。

#foo {
    input.form-control {
        &[type=number],
        &[type=text] {
            /* your css styles here */
        }
    }
}

这可能不是“简洁”，因为最终结果比你期望的结果更长，但它更容易阅读，并且可能会减少样式表中的一些重复。