Question

我有两个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">

有类型复选框的输入。在更改另一个字段时，将填充此列表。带有模式edit-text-field-*的复选框是父级，复选框带有模式＆＃39; edit-text-field- - ＆＃39;是儿童元素。我想在两个不同的背景下展示它。

Answer 1

解决方案

假设这些是 ID ，您可以选择所有，如下所示：

[id^="edit-text-field-"] {
    /* YOUR CSS */
}

这会选择edit-text-field-11，edit-text-field-12，edit-text-field-12-23等。

要使用此部分选择器更加特定，您可以将12添加到结尾等，例如

[id^="edit-text-field-12"] {
    /* YOUR CSS */
}

这会选择edit-text-field-12，edit-text-field-12-23，但不会选择edit-text-field-11。

对于个人 ID，语法如下：

#edit-text-field-12 {
    /* YOUR CSS */
}

如需进一步阅读，请参阅W3Schools CSS Selectors，其中介绍了所有可用的CSS选择器。

在问题编辑的回复中：

#edit-text-field-12 {
    /* YOUR CSS for the first bit */
}
[id^="edit-text-field-12-"] {
    /* YOUR CSS for the other bits */
}

将第二组替换12与17等。

你不能选择12为任意数字的部分，因为CSS中有没有通配符值（例如edit-text-field-*-），所以你必须重复以上，您可以使用逗号，这样就不会重复样式。

#edit-text-field-12,
#edit-text-field-17 {
    /* YOUR CSS for the first bit */
}
[id^="edit-text-field-12-"],
[id^="edit-text-field-17-"] {
    /* YOUR CSS for the other bits */
}

解决方案，因为输入具有值，就是使用这些值来检测它们的类型。

这样做，你可以选择这样的一切：

[id^="edit-text-field-"]:not([value*="-"]) {
    /* YOUR CSS for the first bit */
    background: #f44336;
}
[id^="edit-text-field-"][value*="-"] {
    /* YOUR CSS for the other bits */
    background: #1976d2;
}

Answer 2

您使用partial selector如下所示。

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

}

编辑： Jquery解决方案

由于您没有明确提及是否要更改div或输入元素的背景颜色，我假设您想要将每个输入包装在div中并为它们着色。

以下是示例摘要。

要点。

1。我在所有输入上使用了filter()，仅使用regex过滤掉单个数字ID和双位数字ID

^edit-text-field-\d+$ - ＆gt;确保选择edit-text-field-12，edit-text-field-17

之类的ID

^edit-text-field-\d+-\d+$ - ＆gt;确保选择edit-text-field-12-23，edit-text-field-17-21等ID。

2。一旦元素被过滤，我会使用wrap将div包装起来，并使用div和相应的类名来获取背景颜色。

希望这有用。

＆＃13;

var singleNumberPatternElements = [];
var doubleNumberPatternElements = [];

$('input').filter(function(){
 return this.id.match(/^edit-text-field-\d+$/g);
}).wrap('<div class="singleNumber"/>');

$('input').filter(function(){
 return this.id.match(/^edit-text-field-\d+-\d+$/g);
}).wrap('<div class="doubleNumber"/>');

＆＃13;

.singleNumber{
background-color:blue; 
}

.doubleNumber{
  background-color:Red; 
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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">

＆＃13;

Answer 3

使用CSS3部分选择器

div[class^="edit-text-field-"]{
  width:100%;
  background-color: blue;
}

<div class="edit-text-field-12">abc</div>
<div class="edit-text-field-12-23">def</div>

如何为div模式应用css

3 个答案: