Question

我写过这个css：

.form-group > input[type="text"],
.form-group > input[type="text"]:hover,
.form-group > input[type="text"]:active,
.form-group > input[type="password"],
.form-group > input[type="password"]:hover,
.form-group > input[type="password"]:active,
.form-group > input[type="email"],
.form-group > input[type="email"]:hover,
.form-group > input[type="email"]:active {
    max-width: 400px;
}

我知道我可以通过写

来缩短这一点

.form-group > input[type="text"],
.form-group > input[type="password"],
.form-group > input[type="email"] {
    max-width: 400px;
    &:hover,
    &:active {
    }
}

嗯，第二个代码部分是我真正写的东西，第一个代码只是针对问题的戏剧性，我猜;）

现在我想知道是否有一个功能允许对输入类型选择器进行分组，如下所示：

.form-group > input {
        $:text,password,email
    max-width: 400px;
    &:hover,
    &:active {
    }
}

Answer 1

您可以使用较少的常规CSS应用：

.form-group > input {
  &[type="text"], &[type="password"], &[type="email"] {
     &:hover, &:active {
       max-width: 400px;
     }
  }
}

＆符号（&）引用input元素，您只需添加type属性的规则

Answer 2

不，Less不提供这样的功能。

SCSS采用更“程序化”的方法，因此您可以使用@each指令来执行您想要的操作。

Answer 3

@yoavmatchulsky's solution并未涵盖没有:hover或:active的情况。这将是完整的解决方案，涵盖问题的第一个代码块中您想要的所有内容：

.form-group > input {
  &[type="text"], &[type="password"], &[type="email"] {
    &, &:hover, &:active {
      max-width: 400px;
    }
  }
}

这变为：

.form-group > input[type="text"],
.form-group > input[type="password"],
.form-group > input[type="email"],
.form-group > input[type="text"]:hover,
.form-group > input[type="password"]:hover,
.form-group > input[type="email"]:hover,
.form-group > input[type="text"]:active,
.form-group > input[type="password"]:active,
.form-group > input[type="email"]:active {
  max-width: 400px;
}

Less是否具有缩短输入类型选择器的功能？

3 个答案: