如何为div模式应用css

我有两个div，假设第一个是

edit-text-field-12

，另一个是

edit-text-field-12-23

。这些数字发生了变化，我想对div应用不同的css。是否可以在CSS中执行此操作

我想为模式

edit-text-field-12

之后的所有div应用红色背景色，为模式

edit-text-field-12-23

的div应用蓝色背景色

可能吗

<input type="checkbox" id="edit-text-field-12" value="12">
<input type="checkbox" id="edit-text-field-12-23" value="12-23">
<input type="checkbox" id="edit-text-field-12-46" value="12-46">
<input type="checkbox" id="edit-text-field-12-39" value="12-39">

<input type="checkbox" id="edit-text-field-17" value="17">
<input type="checkbox" id="edit-text-field-17-21" value="17-21">
<input type="checkbox" id="edit-text-field-17-34" value="17-34">

---

存在类型为复选框的输入。更改另一个字段时，将填充此列表。带有模式

编辑文本字段-*

的复选框是父元素，带有模式“编辑文本字段--”的复选框是子元素。我想在两个不同的背景中展示它。

底部的解决方案

---

---

假设这些是ID，您可以选择它们全部，如下所示：

[id^=“编辑文本字段-”]{
/*你的CSS*/
}

这将选择

edit-text-field-11

，

edit-text-field-12

，

edit-text-field-12-23

等

为了更具体地使用这个部分选择器，您可以在末尾添加12等，例如

[id^=“edit-text-field-12”]{
/*你的CSS*/
}

这将选择

edit-text-field-12

，

edit-text-field-12-23

，但不选择

edit-text-field-11

对于单个ID，语法如下：

#编辑文本字段-12{
/*你的CSS*/
}

如需进一步阅读，请参阅，其中解释了所有可用的CSS选择器

---

---

在对问题的回答中编辑：

#编辑文本字段-12{
/*你的CSS的第一位*/
}
[id^=“edit-text-field-12-”]{
/*其他位的CSS*/
}

将第二组的12更换为17等

您不能选择12为任意数字的部分，因为CSS中没有通配符（例如，

编辑文本字段-*-

），所以您必须重复上述内容，您可以使用逗号，这样您就不会重复样式

#edit-text-field-12，
#编辑-text-field-17{
/*你的CSS的第一位*/
}
[id^=“edit-text-field-12-”，
[id^=“edit-text-field-17-”]{
/*其他位的CSS*/
}

---

---

由于输入具有值，解决方案是使用这些值来检测它们是哪种类型

执行此操作时，您可以选择以下各项：

[id^=“编辑文本字段-”]：不是（[value*=”-“]）{
/*你的CSS的第一位*/
背景#f44336；
}
[id^=“编辑文本字段-”][value*=“-”]{
/*其他位的CSS*/
背景：1976d2；
}

底部的解决方案

---

---

假设这些是ID，您可以选择它们全部，如下所示：

[id^=“编辑文本字段-”]{
/*你的CSS*/
}

这将选择

edit-text-field-11

，

edit-text-field-12

，

edit-text-field-12-23

等

为了更具体地使用这个部分选择器，您可以在末尾添加12等，例如

[id^=“edit-text-field-12”]{
/*你的CSS*/
}

这将选择

edit-text-field-12

，

edit-text-field-12-23

，但不选择

edit-text-field-11

对于单个ID，语法如下：

#编辑文本字段-12{
/*你的CSS*/
}

如需进一步阅读，请参阅，其中解释了所有可用的CSS选择器

---

---

在对问题的回答中编辑：

#编辑文本字段-12{
/*你的CSS的第一位*/
}
[id^=“edit-text-field-12-”]{
/*其他位的CSS*/
}

将第二组的12更换为17等

您不能选择12为任意数字的部分，因为CSS中没有通配符（例如，

编辑文本字段-*-

），所以您必须重复上述内容，您可以使用逗号，这样您就不会重复样式

#edit-text-field-12，
#编辑-text-field-17{
/*你的CSS的第一位*/
}
[id^=“edit-text-field-12-”，
[id^=“edit-text-field-17-”]{
/*其他位的CSS*/
}

---

---

由于输入具有值，解决方案是使用这些值来检测它们是哪种类型

执行此操作时，您可以选择以下各项：

[id^=“编辑文本字段-”]：不是（[value*=”-“]）{
/*你的CSS的第一位*/
背景#f44336；
}
[id^=“编辑文本字段-”][value*=“-”]{
/*其他位的CSS*/
背景：1976d2；
}

您可以按如下方式使用

div[class^="edit-text-field-"] {

}

编辑：Jquery解决方案

由于您没有清楚地提到是否要更改div或input元素的背景色，因此我假设您希望将每个输入包装在一个div中并为其着色

下面是示例代码段

关键点

1。我在所有输入上使用了

regex

^edit text field-\d+$

->确保它选择的id类似于

edit-text-field-12

，

edit-text-field-17

^edit text field-\d+-\d+$

->确保它选择了id，如

edit-text-field-12-23

，

edit-text-field-17-21

等

2。过滤完元素后，我将使用带有div的

wrap

对其进行包装