有没有办法使用相同的元素来定位多个类

Question

我有一个表单的样式，其中一个片段在这里：

input[type="text"], input[type="tel"], input[type="password"], input[type="email"], textarea, select {
   height: 40px;
   padding:  10px;
}

我想在网站上的几种不同形式（但不是全部）上使用这种样式。每个都有自己的id，例如一个是.node-825，另一个是.node-826。我想知道是否有一种巧妙的方法来使用我的样式表来定位所有表单。

我知道我可以做以下事情：

.node-825 input[type="text"], .node-825 input[type="tel"], .node-825 input[type="password"], .node-825 input[type="email"], .node-825 textarea, .node-825 select, 
.node-826 input[type="text"], .node-826 input[type="tel"], .node-826 input[type="password"], .node-826 input[type="email"], .node-826 textarea, .node-826 select {
    height: 40px;
    padding:  10px;
}

这确实有效，但说实话，它非常混乱，似乎没必要，必须有一个更简洁的方法来做到这一点，而不是一遍又一遍地重复自己。我需要有大约10种形式，因此我不得不重复上述选择器10次，每次更换一次。

我正在寻找类似的东西：

.node-825, .node-856(input[type="text"], input[type="tel"], input[type="password"], input[type="email"], textarea, select) {
    height: 40px;
    padding:  10px;
}

以上不起作用，但这是我的目标。虽然我已经注意到类似的问题，但似乎没有一个问题可以回答我想要做的事情。

这是HTML的基本格式，删除了所有“绒毛”，让您了解每个表单的布局。

<div id="node-825" class="blog-single-post node node-webform clearfix">
   <input type="text">
</div>

Answer 1

您可以简单地向要受影响的所有表单标记添加公共类，并在选择器中使用该类，而不是使用多个ID重复规则。

<form id="node-825" class="layout_1">
  ...
</form>
<form id="node-826">
  ...
</form>
<form id="node-827" class="layout_1">
  ...
</form>

......并在CSS中

.layout_1 input[type="text"], 
.layout_1 input[type="tel"], 
.layout_1 input[type="password"], 
.layout_1 input[type="email"], 
.layout_1 textarea, 
.layout_1 select {
   height: 40px;
   padding:  10px;
}

......这将影响#node-825和#node-827，但不会影响#node-826

Answer 2

如何在CSS选择器中使用模式：

[class^=node-] {
    color: red;  
}

这将选择类以“node-”开头的所有元素。