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" />

它们将保持与其他输入相同的外观，但不会受到宽度尺寸的其余部分的约束。

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

2 个答案: