Css 有没有一种方法可以针对具有相同元素的多个类

Css 有没有一种方法可以针对具有相同元素的多个类,css,css-selectors,Css,Css Selectors,我有一个表单的样式,这里有一个片段: input[type="text"], input[type="tel"], input[type="password"], input[type="email"], textarea, select { height: 40px; padding: 10px; } 我想在一个站点的几个不同的表单(但不是全部)上使用这种样式。每个都有自己的id,例如一个是.node-825,另一个是.node-826。我想知道是否有一种简洁的方法可以使用我的

我有一个表单的样式,这里有一个片段:

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>

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

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

…这将影响
#node-825
#node-827
,但不会影响
#node-826
在CSS选择器中使用模式如何:

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

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

您还可以添加HTML吗?我想我可能有办法解决这个问题,但是我必须先看一下HTML。我已经做了编辑,我只包括了一个小片段,去掉了所有的绒毛,给你一个例子。对我来说,如果没有一些CSS预处理器,比如SASS或更少,恐怕是不可能的。。。。除非你当然愿意修改标记。啊,要是这么容易就好了。虽然这通常是可行的,但我使用的是Drupal,没有一种简单的方法可以将类添加到某些表单中,而不是其他表单中+这是个好主意,但不幸的是,我不想针对的许多其他元素也以“node-”开头。您可以使用上面提到的类来完成此选择器。那将针对确切的元素。对不起,我不太明白。我如何瞄准.node-825和.node-856?
[class^=node-] {
    color: red;  
}