这个 CSS 语法可以改进，更有条理吗？

Question

考虑到input name f1 to f7 都像第一行一样type=text，有没有更简洁的方法来编写相同的css？

谢谢

#tform input[type="text"] { -moz-border-radius:6px;边框：1px 纯绿色； } #tform 输入[name="f1"], #tform 输入[name="f2"], #tform 输入[name="f3"], #tform 输入[name="f4"], #tform 输入[name="f5"] { 宽度：40%; } #tform 输入[name="f6"] { 宽度：80%;显示：块； } #tform 输入[name="f7"] { 宽度：80%; }

我的问题实际上是我有 3 个额外的输入：name f8, f8, f10，还有type=text，我让它们在没有width:%; 的情况下自然设置宽度。

我曾考虑将 40% 放入第一行并让其余部分覆盖它，但随后额外的 3 将默认占用 40%。

Answer 1

考虑给 f1-f5 一个类吗？它可能是一些额外的 HTML 字节，但你会得到更干净的 CSS。

.yourClass { width: 40%; }

Answer 2

清除它并使用类选择器：

.input_text{ -moz-border-radius:6px; border: 1px solid green; }
.stylea{ width:40%; }
.styleb{ width:80%; display:block; }
.stylec{ width:80%;}

然后在你的 HTML 中：

<input type="text" name="f1" class="input_text stylea" />
<input type="text" name="f2" class="input_text stylea" />
<input type="text" name="f3" class="input_text stylea" />
<input type="text" name="f4" class="input_text stylea" />
<input type="text" name="f5" class="input_text stylea" />
<input type="text" name="f6" class="input_text styleb" />
<input type="text" name="f7" class="input_text stylec" />

对于任何其他输入元素，您可以只使用基本 CSS 选择器样式，在本例中为 .input_text，而不应用其他人使用的其他类选择器 (.stylea, .styleb, .stylec)。

所以当你添加其余部分时：

<input type="text" name="f8" class="input_text" />
<input type="text" name="f9" class="input_text" />
<input type="text" name="f10" class="input_text" />

它们将保持与其他输入相同的外观，但不受其他宽度大小的限制。