一个类下的css分组元素答案

【问题标题】：css grouping element under one class一个类下的css分组元素
【发布时间】：2016-11-11 14:12:22
【问题描述】：

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

例如：

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

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

我已经知道逗号的方式了，

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

一些其他的方式来做到这一点，由一些运营商？不需要一遍又一遍的类名。

【问题讨论】：

关于您的附加问题：正如我所写：使用 SASS 或 LESS，但不能仅使用 CSS。
如果你希望类.formres中的所有元素都是width: 150px，那么你可以使用.formres * { width: 150px; }。不过，我不确定这是否真的是你想要的。您也可以包含您的 HTML 吗？我们需要准确了解您要选择哪些元素。
同样，如果您只想在.formres 中输入宽度：150px，那么只需使用.formres input { width:150px; }
Is there a way to select multiple input field types with CSS?的可能重复

标签： css

【解决方案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。

【讨论】：

是的，我已经知道了，但它需要类名 agian，我确信必须有一种方法或运算符来实现这一点，但遗憾的是我认为这是唯一的方法。跨度>
如果你不使用任何 CSS 预处理器，这是在这种情况下的唯一方法。
你不觉得这很重要吗，因为我只有四个元素，有些网站可能有数百个元素需要用类名来引用......
那么使用 LESS 或 SASS 是个好主意——它们就是为这类东西而设计的
注意：我为我的答案添加了一个可能的解决方案，它比第一个更短。

【解决方案2】：

我希望 .formres 类中的所有元素宽度为 150。

我假设您是指所有直系子女。

一些其他的方式来做到这一点，由一些运营商？不需要一遍又一遍的类名。

是的，您要查找的运算符是universal selector，即星号 (*)，它可以选择任何元素。

.formres > * { width: 150px; }

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

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

.formres .container { width: 150px; }

【讨论】：