如何通过css选择所有输入元素？

Question

下面的CSS代码是重复的，是否有任何CSS快捷方式，因此我们可以在单行代码中选择所有输入字段。

.form-group input[type='text'],
.form-group input[type='email'],
.form-group input[type='password'],
.form-group input[type='tel']  
{
   margin:10px; 
}

Answer 1

假设您的 HTML 结构如下：

<div class="form-group"> // or any other kind of wrapper element with a class of "form-group"
  <input type="text">
  <input type="email">
  <input type="pasword">
  <input type="tel">
</div>

您可以将当前的 css 替换为以下内容：

.form-group input { margin:10px; }

并且边距将应用于<input>嵌套在.form-group元素内的所有元素。

检查并运行以下代码片段以获取上述代码的实际示例：

<div class="form-group"> // or any other kind of wrapper element with a class of "form-group"
  <input type="text">
  <input type="email">
  <input type="pasword">
  <input type="tel">
</div>

.form-group input { margin:10px; }