web-dev-qa-db-fra.com

Est-il possible d'utiliser des caractères génériques dans la balise css id

en supposant que j'ai peu d'articles avec des identifiants similaires:

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

je voudrais mettre dans mon fichier CSS quelque chose comme:

#id_*{width = 100%;}

y a-t-il un moyen de faire cela? J'ai essayé quelque chose comme:

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

mais cela n'a pas fonctionné ......

Et sa nécessité de travailler sur IE :(

EDIT: Nedd pour travailler sur IE8 ....

MODIFIER:

<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"/>

et CSS:

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

Without style

Witj style

csscss-selectors
19
Bjorkson

input[id^='id_']{width:200px;} devrait fonctionner. C'est certainement dans ce violon:

http://jsfiddle.net/jYZnX/

EDIT: De plus, pour montrer qu’il ne sélectionne pas une entrée sans un identifiant commençant par 'id_':

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

ÉDITER 2: Votre mode de document semble être réglé sur Quirks cela causera des problèmes avec le sélecteur css. Définissez votre type de document correctement, par exemple en utilisant <!DOCTYPE HTML>. Cela nécessitera cependant l’accès au code original des pages Web. Par conséquent, sans cela, vous serez embêté.

25
anothershrubery

Le sélecteur que vous avez utilisé (^) fonctionne correctement dans IE:

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

Et voici le résultat:

IE7

enter image description here

IE8

enter image description here

IE9

enter image description here

IE10

enter image description here

Comme je l'ai vu dans vos images, votre IE rend votre page avec Mode Quirks . Vous n'avez peut-être pas de doctype ou de faux doctype sur votre page. Rendez votre doctype valide comme ci-dessous:

<!doctype html>
4
user1823761

Soit un tableau à trois colonnes avec 200 lignes et chaque ligne ayant un identifiant individuel comme celui-ci:

<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>

et étant donné que vous voulez centrer verticalement le contenu de chaque td, le caractère générique CSS suivant fera en sorte que le contenu de chaque td soit centré verticalement ** (je suis sûr que vous pouvez également utiliser ceci pour ajuster la largeur):

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

** Une réserve - la troisième colonne du tableau contient une sélection dans chaque td. Alors que le bouton d'ancrage dans la première colonne et le texte d'ancrage dans la deuxième colonne sont centrés verticalement dans chaque td à l'aide du css ci-dessus, la sélection dans la troisième colonne ne répond pas à ce css pour une raison quelconque - mais il existe un correctif. Le css suivant entraînera le centrage vertical des éléments de la sélection:

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

C'est précisément à quoi servent les classes. Ce que tu veux c'est:

.a { width: 100% }
0
madd0