CSS如何减少样式定义？

Question

我有一个css样式定义，如下所示：

input[type=email], input[type=tel], input[type=url], input[type=text], input[type=password], input[type=file], textarea { ... }

可以减少到更短的时间吗？

注意：我不想将样式应用于例如input[type=checkbox]，input[type=radio]或input[type=image]。

Answer 1

你应该做一般声明，然后处理例外。

input {
    p: v1;
}

input[type=checkbox], input[type=radio], input[type=image] {
    p: v2;
}

其中v2取消v1;

Answer 2

如果您知道这些类型只会显示在input个元素中，那么您可以这样做：

*[type="email"],
*[type="tel"],
*[type="url"],
*[type="text"],
*[type="password"],
*[type="file"],
textarea {
  border: 1px solid red;
}

Firefox 3.6.6，Iron 5.0.380和Opera 10.60都没有问题，但是IE没有注意到。这也适用于问题中使用的选择器。提供跨浏览器解决方案的唯一答案是Luke Burns的回答。

Answer 3

您可以为所有字段指定相同的类，因此它们的样式可以采用相同的方式：

HTML：

<input class="inputClass" type="tel" /> <input class="inputClass" type="url" />

的CSS：

.inputClass { ... }

如果由于某种原因你不能，而且你必须没有上课，那么你拥有的是唯一的方法。