使用CSS3定位动态ID，例如＃event_rules_attributes_0_interval，＃event_rules_attributes_1_interval等

Question

使用ID来设置输入标签的样式非常方便，因为它们具有比类更多的优先权。

例如，我在特定容器中有input.text元素的默认宽度：

.details .metadata input.text { width: 200px; }

要更改特定页面的宽度，使用ID代替上面的长选择器会更方便：

#my_input { width: 150px; }

现在我在我的应用程序中的某个位置自动生成了输入字段（使用Ruby On Rails中的form_for和nested_attributes_for生成），生成如下ID：

#event_rules_attributes_0_interval
#event_rules_attributes_1_interval
#event_rules_attributes_2_interval
...etc...

和

#event_rules_attributes_0_count
#event_rules_attributes_1_count
#event_rules_attributes_2_count
...etc...

所以我需要使用像"begins with event_rules_attributes_" AND "ends with _count"或"begins with event_rules_attributes_" AND "ends with _interval"这样的ID选择器。我知道有[id$=]和[id^=]匹配器，但它们可以以某种方式结合使用吗？

Answer 1

我自己发现了：

[id^='event_rules_attributes_'][id$='_interval'] { width: 150px; }

似乎有点难看，但有效。