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

是的，您需要将“class”分配给您希望分组的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 classes匹配元素而不是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>

CSS分组元素的快捷方式

3 个答案: