Question

有没有办法通过引用类来对所有元素进行分组：

例如：

.formres select input[type="file"] input[type="email"] input[type="text"] input[type="password"] {
    width: 150px;
}

这不起作用，我希望类.formres中的所有元素都是宽度150.想知道这是否可行或者我是否必须写单个值。

PS

我已经知道了逗号方式，

.formres select, .formres input[type="file"], .formres input[type="email"], .formres input[type="text"], .formres input[type="password"] {
    width: 150px;
}

某些运营商还有其他一些方法吗？这不需要一次又一次地使用类名。

Answer 1

你可以这样写：

.formres input[type="file"], .formres input[type="email"], .formres input[type="text"], .formres input[type="password"] {
    width: 150px;
}

此外：

如果你在DIV中只有一个或两个输入元素，那个类不应该达到150px的宽度，你可能会使用像

这样的东西。

.formres input {
  width: 150px;
}
.formres input[type="xxxx"] {
  width: auto;
}

第一个将为所有元素提供150px宽度，第二个将定义/覆盖未获得150px的元素，但默认为auto。

Answer 2

我希望班级.formres内的所有元素都是宽度150。

我认为你的意思是所有直接的孩子。

某些运营商还有其他一些方法吗？这不需要一次又一次地使用类名。

是的，您正在寻找的运营商是universal selector，星号（*），它可以选择任何元素。

.formres > * { width: 150px; }

您也可以考虑在.formres内使用所需宽度的容器，并将input元素放在其中。它们将扩展以填充其宽度：

<form class="formres">
  <div class="container">
    <input type="text"...

.formres .container { width: 150px; }

css分组元素在一个类下

2 个答案: