CSS通过id递增

Question

我有一组由javascript生成的文本框.其中一些文本框需要额外的CSS样式.我不能使用id属性,因为只有一些文本框需要这种样式.我也不能使用class属性,因为它在所有文本框中都是相同的.

我目前正在使用这样的CSS:

#txtSys8
{
position: relative;
left: 203px;
}

#txtSys9
{
position: relative;
left: 203px;
}

#txtSys10
{
position: relative;
left: 203px;
}

有没有一种方法可以循环使用这些ID(从#txtSysy8到#txtSys19)而无需单独设置样式？

这是生成html的代码

rssTag ="<TABLE id='rssTable' border=\"0\" width=\"100%\"><TBODY>";

for(var i=8; i<arrGridData.length; i++){

var upToNCharacters = arrGridData[i][0].substring(0, 13);

if(upToNCharacters == "RSS_FEED_LINK"){
rssTag+="<TR><TD><font>" + arrGridData[i][1] + ":</TD><TD>  <input type=\"text\" id=\"txtSys"+i+"\" name=\"txtSys"+i+"\" onChange=\"pgEdited()\" tabindex=\" " +(i+1) +"\" class=\"fontDefault\"></TD><TD><input type=\"checkbox\" id=\"check" + arrGridData[i][0].substring(14, arrGridData[i][0].toString().length) + "\" name=\"check\" onChange=\"pgEdited()\" class=\"chk\"/></TD></TR>";

        }else{
rssTag+="<TR><TD><font>" + arrGridData[i][1] + ":</TD><TD><input type=\"text\" id=\"txtSys"+i+"\" name=\"txtSys"+i+"\" onChange=\"pgEdited()\" tabindex=\" " +(i+1) +"\" class=\"fontDefault\"></TD></TR>";

        }
        createArrControls(i);

rssTag += "</TBODY></TABLE>";

document.getElementById('tableDiv2').innerHTML=rssTag;

我正在检查一个javascript数组,如果数组中包含一个带有"RSS_FEED_LINK"的字符串,它会在字符串"rssTag"后附加一个文本框和一个复选框.否则,只会添加一个文本框.

我需要将样式添加到这些生成的文本框中

Answer 1

您可以使用 子字符串匹配属性选择器

该[attribute^=value]选择器的每个元素,其属性值开始于指定值相匹配.

div[id^='txtSys'] {
   position: relative;
   left: 203px;
}