Question

所以我想自定义几个输入。我试过了，它工作正常：

<!DOCTYPE html>
<html>
<head>
<style>

input[id=a]:focus {
  width: 250px;
}
</style>
</head>
<body>
<h1>The width Property</h1>

Searcha: <input type="text" name="search" id="a">
Searchb: <input type="text" name="search" id="b">

</body>
</html>

但是，我想在输入中添加更多ID。有可能吗？

//try
    input[id=a b]:focus {
      width: 250px;
    }

Answer 1

您可以像这样在CSS中链接选择器：

#foo, #bar {
    color: red
}

但是，如果您有5个以上的id，这可能会有点乏味，这时最好使用一个类：

HTML：

<input class="search-input" />
<input class="search-input" />

CSS：

.search-input {
    color: red
}

Answer 2

#a, #b {}

就这么简单。

Answer 3

没有可以针对单个属性的多个值的选择器。

不幸的是，您将需要用逗号分隔的整个选择器列表，并使用不同的值，例如：

input[id="a"]:focus, input[id="b"]:focus {
  width: 250px;
}

在这种情况下上课会更有益。

CSS输入中的几个ID

3 个答案: