如何指定一个与多个值中的一个完全匹配的 CSS 选择器？答案

【问题标题】：How do I specify a css selector which matches exactly one of multiple values?如何指定一个与多个值中的一个完全匹配的 CSS 选择器？
【发布时间】：2013-01-08 05:59:18
【问题描述】：

我在一个表单中有多个输入元素。我想为所有具有属性“type”且值为“text”或“email”的输入元素指定一个css选择器。如何指定单个选择器？

例如

#ABC.XYZ .MNQ input[type="text"] {
margin-bottom: 8px;
}

我知道我可以在末尾加一个逗号，然后用 type="email" 重复整个选择器。想知道是否有更短的形式可以对任何特殊运算符执行相同的操作？

【问题讨论】：

我知道没有更短的方法了。只需编写 css 代码并继续。 :-)
Attribute selector where value equals either A or B?的可能重复
如果您想减少打字次数，请使用 CSS 预处理器（Sass、LESS 等）。无论您是手动输入还是让预处理器完成，选择器都必须是#ABC.XYZ .MNQ input[type="text"] , #ABC.XYZ .MNQ input[type="email"]。

标签： css css-selectors

【解决方案1】：

我很确定最快的方法是：

#ABC.XYZ .MNQ input[type="text"] , #ABC.XYZ .MNQ input[type="email"] {
margin-bottom: 8px;
}

选择线越短越好；但就整体代码执行效率而言，没有区别。

【讨论】：