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

【问题标题】：Succinct way of specifying two or more values for an attribute in css selector在 css 选择器中为属性指定两个或多个值的简洁方法
【发布时间】：2016-08-31 17:06:51
【问题描述】：

我有一个 CSS 选择器如下：

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

有没有更简洁的语法如：

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

这不起作用，但有类似的作用吗？

【问题讨论】：

标签： css css-selectors

【解决方案1】：

不，恐怕没有。虽然没有像您的示例中那样在属性选择器中枚举值的提议，但Selectors 4's :matches() 至少允许您在单个复合选择器中对两个属性选择器进行 OR：

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

也就是说，在可预见的未来，你可能不得不坚持当前的冗长语法，直到浏览器开始实现 :matches()。

【讨论】：

【解决方案2】：

不是在普通的 CSS 中，而是使用 LESS 或 SASS 之类的预处理器，您可以嵌套属性。

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

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

【讨论】：