Тот же стиль для id, который заканчивается теми же буквами

У меня на моем экране несколько таблиц, в которых их идентификатор заканчивается "test": studentsTest, marksTest, classesTest и т.д.

Я хочу, чтобы все они имели одинаковый стиль. Есть ли способ определить стиль для всех объектов, их идентификатор заканчивается теми же символами?

Спасибо Devora

Ответы

Ответ 1

Если вы можете изменить свою разметку, самым простым и наиболее совместимым с кросс-браузером способом является использование класса "test", например:

.test {background-color:#FC0;}

<table id="students" class="test">...</table>
<table id="marks" class="test">...</table>
<table id="classes" class="test">...</table>

Если вы не можете изменить разметку, но вы можете использовать jQuery, вы можете стилизовать идентификаторы, заканчивающиеся на "test" следующим образом:

$(document).ready(function(){

    $('table[id$=test]').css('background-color','#FC0');

});

Ваш последний вариант, если вы не можете или не будете использовать jQuery (или аналогичный), - это использовать чистый CSS3. Это использует тот же синтаксис, что и выше, но будет работать только в более современных браузерах:

table[id$=test] {background-color:#FC0;}

Ответ 2

Согласно W3C это теоретически возможно, но только в CSS 3.

E [foo $= "bar" ] элемент E, Значение атрибута "foo" заканчивается точно со строкой "bar"

Однако я бы сказал, что это далеко не лучший способ сделать это, потому что он будет работать только в последних браузерах. Я также сомневаюсь, что производительность будет очень большой. Я бы посоветовал вам дать элементы, которые вам нужно, чтобы поделиться общим стилем класса, а затем стиль класса.

Ответ 3

Это случай, когда вы определенно будете использовать классы.

<table id="studentsTest" class="test"?

Если по какой-то странной причине вы не можете использовать это, вы можете попробовать этот фильтр jqery regex, который должен быть способен выбирать элементы, включая подстановочные знаки.

Ответ 4

Я бы предложил просто добавить к ним класс следующим образом:

<table class="test">

то просто создайте тестовый класс

.test {
   border: 1px solid #f00;
}

и т.д. Лучше и намного больше семантики. Таким образом, вы можете удалить тестовый суффикс в своих идентификаторах и просто пойти со студентами, отметками и т.д., Которые определенно описывают, что содержится в вашей таблице.