css - 使用 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 Railsform_for和nested_attributes_for在 Ruby On Rails 中生成），它会生成如下所示的 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这样的 ID 选择器"ends with _interval"。我知道有[id$=]和[id^=]匹配器，但它们可以以某种方式组合吗？

Answer 1

我自己才发现的：

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

看起来有点难看，但有效。