CSS和应用具有特定ID的所有控件的样式

Question

让我说我有一些带有ID的输入：

ctl139_ctl00_txtValue
ctl140_ctl00_txtValue
ctl141_ctl00_txtValue
.....
xxxxxx_ctl00_txtValue

如何使用CSS为这些输入应用相同的样式（其中ID遵循模式：xxxx_ctl00_txtValue）

我尝试了CSS3作为Minkiele建议，但我已经完成了以下工作：

[id*="_ctl00_txtValue"]{ /* RULES */ } 

然后它应该为id包含我的字符串的所有元素应用样式。它适用于Chrome但不适用于IE8，但msdn告诉它应该可以工作。为什么它不起作用？

Answer 1

您可以在：$=中使用 css3 选择器结尾，但我不知道有多少浏览器实现此功能。

input[id$="_ctl00_txtValue"]{
   /* RULES */
}

如果您可以更改输入标记，我建议为这些元素添加一个类，这样可以更加简洁。

CSS3 Selectors

<强>更新

Quirksmode有一个针对此选择器类型的测试页。似乎唯一不支持此功能的浏览器（惊喜）IE 5.5和6

Answer 2

您无法控制生成的HTML这一事实使其变得困难。

如果你没有厌恶jQuery和一些轻微的DOM开销，这将有效：

抓住所有物品的容器，让我们在div中说出来。保持这个选择器尽可能紧，因为它“松散”，处理的元素越多，因此开销越大。

var pattern = '_ctl00_txtValue';
$('#somecontainer input').each(function() {
   if ($(this).attr("id").indexOf(pattern) > 0) {
      // Apply CSS using jQuery, e.g:
      $(this).css("color","red");
   }
});

基本上你是在循环遍历给定容器中的DOM元素，检查ID是否包含你想要的模式，如果是，则应用你的CSS。

这应该可行，但正如我所说，根据HTML的结构，会有一些DOM遍历开销。