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-'开头的类的元素。

有没有办法针对具有相同元素的多个类

2 个答案: