有没有办法在方括号选择器中包含多个属性？

Question

是否有一种方法可以缩短这些代码行而不重复自己，因为它们执行相同的操作？

.my-form input[type="text"]{
    padding: 8px;
    width: 100%;
}
.my-form input[type="email"]{
    padding: 8px;
    width: 100%;
}

Answer 1

1. 如果仅输入字段是文本和电子邮件，则只需在以下位置设置代码 .my-form输入{// code here}。

2. 解决此问题的最佳方法是使用CSS预处理器，例如SASS。这将有助于实现代码的这种可重用性。

Answer 2

除了删除Abdul Hannan建议的“ [type = ...]”以外，我想到的唯一表达这种简短的方法是：

.my-form input[type="text"],
.my-form input[type="email"]{
    padding: 8px;
    width: 100%;
}