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

时间:2019-03-17 16:15:23

标签: html css

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

我尝试像描述here一样应用它,但没有成功:

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 -->

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

1 个答案:

答案 0 :(得分:6)

分别放置它们,并在它们之间使用逗号,如下所示。

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

查看docs了解更多信息。

注意::我使用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" />