如何优化此 css 代码，以便在 html 中多次不编写相同的 css 代码？

Question

我有一个输入框。 这些值已经在其中定义或将在其他一些规则中生成，这就是为什么它们都有单独的 id 的原因。

html 代码：

<input class="box" type="text" style="width:8%; text-align:center" id="a" value="A" readonly="true"/>
<input class="box" type="text" style="width:8%; text-align:center" id="b" value="B" readonly="true"/>
<input class="box" type="text" style="width:8%; text-align:center" id="c" value="C" readonly="true"/>
<input class="box" type="text" style="width:8%; text-align:center" id="d" value="D" readonly="true"/>
<input class="box" type="text" style="width:8%; text-align:center" id="e" value="E" readonly="true"/>

现在假设，我必须将宽度8 的大小减小到 6。然后我必须写width:6%' 5 次，这是多余的，因此我不想使用它。 有什么办法可以改进或为此编写任何循环吗？

Answer 1

您的 HTML 元素已经具有 CSS class 属性，因此您可以像这样设置它们的样式：

 .box { width: 6%; text-align:center; }

 <input class="box" type="text" id="a" value="A" readonly="true"/> <input class="box" type="text" id="b" value="B" readonly="true"/> <input class="box" type="text" id="c" value="C" readonly="true"/> <input class="box" type="text" id="d" value="D" readonly="true"/> <input class="box" type="text" id="e" value="E" readonly="true"/>

Answer 2

CSS 类的重点就是处理这种情况。 您可以使用您的框 class 一次更改所有标签，而不是将style="width:8%; text-align:center"放在每个标签中。

INPUT.box {
  width: 8%;
  text-align: center;
}

当然，诀窍是使用正确的 CSS 选择器来访问您想要作为一个组更改的内容。 INPUT.box表示“带有 class 框的所有 INPUT 元素”

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors