Question

我有一个输入声明（在bootstrap模式中），如下所示：

<input type="range" id="seek-bar_<?php echo $i+1;?>" value="0" >

其中i可能是一个很大的数字。我需要这个条的宽度为30px，所以我在上面添加了一个类，允许在样式类中定义宽度，即

<input type="range" id="seek-bar_<?php echo $i+1;?>" value="0" class ="seek-bars" >

然后在我的css文件中声明

.seek-bars {
width: 30px;
 }

无论这不起作用，但宣布

#seek-bar_1 {
width: 30px;

}

有用吗？所以，我不认为我的类定义和声明有什么问题所以这不起作用是否有办法声明一个通配符id匹配？例如＃seek-bar_ *。

我可以将样式声明放在标签内，但这会给我带来其他问题，并希望在我的CSS文件中解析它，如果可能的话。

非常感谢任何帮助。

由于

Answer 1

您可以使用CSS [attribute^=value] 选择器。此选择器匹配其属性值以指定值开头的每个元素。在我们的案例中，seek-bar_。像：

input[id^='seek-bar_'] {
  width: 30px;
  border: 1px solid red;
}

查看下面的示例代码段：

＆＃13;

input[id^='seek-bar_'] {
  width: 30px;
  border: 1px solid red;
}

＆＃13;

<input type="text" id="seek-bar_one" />
<input type="text" id="seek-bar_two" />
<input type="text" id="seek-bar_three" />
<input type="text" id="seek-bar_four" />

＆＃13;

希望这有帮助！

输入顺序的CSS声明<input id =“sequential list”/>由PHP生成

1 个答案: