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

Question

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

<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;
}

看看下面的示例 sn-p：

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

<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" />

希望这会有所帮助！