将CSS规则应用于匹配多个可能属性值之一的元素



我正在尝试将css规则应用于html属性的多个值。

我试图像这里描述的那样应用它,没有成功:

input[name="a"][name="b"] {
    display: none;
}
<input name="a"> <!-- should be hidden -->
<input name="b"> <!-- should be hidden -->
<input name="c"> <!-- should not be hidden -->

该规则根本不应用。

但是,当我仅使用一个属性选择器时,它适用于该匹配元素:

input[name="a"] {
    display: none;
}
<input name="a"> <!-- is hidden -->
<input name="b"> <!-- is not hidden -->

我做错了什么/除重复规则外,有什么方法可以定义它?

将它们分开放置并在下面的逗号中使用逗号。

此代码将CSS应用于input[name="a"] 和/或 input[name="b"]

查看文档以了解更多信息。

注意:我使用background-color: red;而不是display: none;,以便您可以看到差异。要适合您的问题,请将其更改为display: none;

input[name="a"], input[name="b"] {
    background-color: red;
}
<input name="a" />
<input name="b" />
<input name="c" />

最新更新