Есть ли способ использовать подстановочные знаки в теге css id

Предполагая, что у меня есть несколько элементов с похожими идентификаторами:

<input class="a" id="id_1"/>
<input class="a" id="id_2"/>

Я хотел бы установить в моем файле css что-то вроде:

#id_*{width = 100%;}

Есть ли способ, которым я могу это сделать? я пробовал что-то вроде:

input[id^='id_']{width:200px;}

но это не сработало......

И его нужно работать на IE: (

EDIT: не работает для IE8....

EDIT:

<input tabIndex="1690" class="form" id="cust_1_NUM_OBJ_5-00461" dataFld="cust_1_NUM_OBJ_5-00461" dataSrc="#FIELDVALUES" style="text-align: right; height: 20px;" onkeypress="validateNumberChar(this)" onfocus="resetGFocusField('cust_1_NUM_OBJ_5-00461');" onblur="validateChangedNumber(this);" onbeforedeactivate="onbeforedeactivateLookup(this);" type="text" size="20" maxLength="55" datatype="number" numbertype="24,6" valueFieldID="null" tabStop="true" value="1"/>

и CSS:

input[id^='cust_1_NUM_OBJ_5-0046']{width:200px;}

Without style

Witj style

Ответы

Ответ 1

input[id^='id_']{width:200px;} должен работать. Это, безусловно, делает в этой скрипке:

http://jsfiddle.net/jYZnX/

EDIT: Кроме того, чтобы показать, что он не выбирает вход без начала id 'id_':

http://jsfiddle.net/jYZnX/1/

РЕДАКТИРОВАТЬ 2: Поскольку для вашего режима документа, похоже, установлено значение Quirks, это вызовет проблемы с селектором css. Задайте тип документа правильно, например, используя <!DOCTYPE HTML>. Для этого вам потребуется доступ к исходному коду для веб-страниц, поэтому без этого вы будете в затруднительном положении.

Ответ 2

Селектор, который вы использовали (^), корректно работает в IE:

input[id^='id'] {
    background: red;
}

И вот результат:

IE7

enter image description here

IE8

enter image description here

IE9

enter image description here

IE10

enter image description here

Как я видел на ваших фотографиях, ваш IE отображает вашу страницу с режимом Quirks. Может быть, у вас нет доктрины или неправильного доктрины на вашей странице. Сделайте свой doctype действительным, как показано ниже:

<!doctype html>

Ответ 3

Именно для этих классов. Вы хотите:

.a { width: 100% }

Ответ 4

Учитывая таблицу с тремя столбцами с 200 строками и каждой строкой, имеющей отдельный идентификатор, подобный этой строке:

<tr id="row_177">
 <td><a class="btn" href="..">Link1</a></td>
 <td><a href="pdfName.pdf" target="_blank">Name of PDF File</a></td>
 <td><select class="pdf_sel">
    <option value=""> ---- </option>
    <option>Crowell, Thomas</option> 
    </select>
 </td>
</tr>

и учитывая, что вы хотите вертикально центрировать контент в каждом td, тогда следующий подстановочный знак css приведет к тому, что содержимое каждого td будет центрировано по вертикали ** (я уверен, что вы также можете использовать его для регулировки ширины):

tr[id^='row_'] > td {
  vertical-align:middle
}

** Одно предостережение - третий столбец в таблице содержит Select в каждом td. Хотя кнопка привязки в первом столбце и текстовый якорь во втором столбце центрированы по вертикали в каждом td, используя приведенный выше css, выбор в третьем столбце по какой-либо причине не отвечает на этот css, но есть исправление. Следующий css приведет к тому, что элементы Select будут правильно центрироваться по вертикали:

tr[id^='pdfrow_'] > td > select {
margin-top:5px;
margin-bottom:5px
}