css - CSS 分组元素的快捷方式

Question

我有很多输入元素的 div。我需要将几个输入分组并添加一些样式：

div#tabs_add_invoice input#id_description,
div#tabs_add_invoice input#id_annotation,
div#tabs_add_invoice input#id_other {
    /*some style definition*/
}

有什么捷径吗？

Answer 1

是的，您需要为要分组的 div 分配“类”
说，

<div id="div1" class="commonDiv"></div>
<div id="div2" class="commonDiv"></div>
<div id="div3" class="commonDiv"></div>
<div id="div4" class="commonDiv"></div>

现在在您的 CSS 中，您只需要将样式表提供给 commonDiv

.commonDiv {
  //Your styling goes here
}

Answer 2

我看到你的输入有一个 ID，这应该使它们独一无二，所以你不需要指定其他任何东西，比如父母。例如，body div#content div#tabs_add_invoice input#id_description与 相同#id_description。这意味着以下将执行相同的工作。

#id_description,
#id_annotation,
#id_other {
    /*some style definition*/
}

甚至这个，但它会影响里面的所有输入#tabs_add_invoice

#tabs_add_invoice input {
    /*some style definition*/
}

Answer 3

有什么捷径吗？

是的。使用CSS 类来匹配元素而不是 ID。

您的输入元素可以通过分配相同的类来共享样式。像：

CSS

input.wideInput {
    width: 100%;
}

HTML

<div id="tabs_add_invoice">
    <input type="text" id="id_description" class="wideInput" /> 
    <input type="text" id="id_annotation" class="wideInput" /> 
    <input type="text" id="id_other" class="wideInput" />
    <input type="text" id="id_different" />
</div>