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

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

25 голосов
/ 08 марта 2011

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

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

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

#id_*{width = 100%;}

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

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

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

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

РЕДАКТИРОВАТЬ:NEDD для работы на IE8 ....

РЕДАКТИРОВАТЬ: 

<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

Ответы [ 4 ]

25 голосов
/ 08 марта 2011

input[id^='id_']{width:200px;} должно работать.В этой скрипте это точно так:http://jsfiddle.net/jYZnX/1/

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

5 голосов
/ 01 июня 2013

Селектор, который вы использовали (^), работает правильно в 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 html>
0 голосов
/ 01 июня 2013

Учитывая таблицу из трех столбцов с 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>

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

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

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

tr[id^='pdfrow_'] > td > select {
margin-top:5px;
margin-bottom:5px
}
0 голосов
/ 08 марта 2011

Это именно то, для чего нужны классы.То, что вы хотите: 

.a { width: 100% }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...