CSS и применять стиль для всех элементов управления с определенным идентификатором

Question

скажем, у меня есть некоторые входные данные с идентификатором, подобным этому:

ctl139_ctl00_txtValue
ctl140_ctl00_txtValue
ctl141_ctl00_txtValue
.....
xxxxxx_ctl00_txtValue

как, используя CSS, применить тот же стиль для этих входных данных (где идентификатор следует шаблону: xxxx_ctl00_txtValue)

Я попробовал CSS3, как подсказал Минкиеле, но я сделал следующее:

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

тогда он должен применить стиль ко всем элементам, где id содержит мою строку.Он работает в Chrome, но не в IE8, но msdn говорит, что он должен работать.Почему это не работает?

Answer 1

Вы можете использовать css3 селектор заканчивается : $=, но я не знаю, сколько браузеров реализуют эту функцию.

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

Вы можете изменить разметку ввода, я предлагаю добавить к этим элементам класс, который для стилизации проще.

CSS3 селекторы

Обновление

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 в данном контейнере, проверяя, содержит ли идентификатор нужный вам шаблон, а затем, если это так, применяет ваш CSS.

Это должно сработать, но, как я уже сказал, есть некоторые издержки обхода DOM в зависимости от структуры вашего HTML.