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

Question

是否有更简洁的方法来编写相同的CSS ,input name f1 to f7这些都type=text像第一行？

谢谢

#tform input[type="text"]  { -moz-border-radius:6px; border: 1px solid green; }

#tform input[name="f1"],
#tform input[name="f2"],
#tform input[name="f3"], 
#tform input[name="f4"],
#tform input[name="f5"] { width:40%; }

#tform input[name="f6"] { width:80%; display:block; }

#tform input[name="f7"] { width: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" />

它们将保持与其他输入相同的外观,但不受其他宽度尺寸的约束.