有没有办法在 css id 标签中使用通配符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5231105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to use wildcards in css id tag
提问by Bjorkson
assuming i have few items with similar ids:
假设我有几个具有相似 ID 的项目：
<input class="a" id="id_1"/>
<input class="a" id="id_2"/>
i would like to set in my css file something like:
我想在我的 css 文件中设置如下内容：
#id_*{width = 100%;}
is there a way i can do that? i've tried something like:
有没有办法做到这一点？我试过这样的事情：
input[id^='id_']{width:200px;}
but that didnt worked out......
但这没有成功......
And its need to work on IE :(
它需要在 IE 上工作:(
EDIT: nedd to work on IE8....
编辑： nedd 在 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"/>
and CSS:
和 CSS：
input[id^='cust_1_NUM_OBJ_5-0046']{width:200px;}
回答by anothershrubery
input[id^='id_']{width:200px;}should work. It certainly does in this fiddle:
input[id^='id_']{width:200px;}应该管用。它当然在这个小提琴中：
EDIT: Also, to show that it doesn't pick an input without an id beginning 'id_':
编辑：另外，为了表明它不会选择没有 id 开头的输入'id_'：
EDIT 2: As your Document Mode seems to be set to Quirksthis will cause issues with the css selector. Set your doc type correctly, eg using <!DOCTYPE HTML>. This will need access to the original code for the web pages though, so without that you will be in a spot of bother.
编辑 2：由于您的文档模式似乎设置为Quirks，这将导致 css 选择器出现问题。正确设置您的文档类型，例如使用<!DOCTYPE HTML>. 但是，这将需要访问网页的原始代码，因此如果没有它，您将遇到麻烦。
回答by Bjorkson
The selector you used (^), works correctly in IE:
您使用的选择器 ( ^) 在 IE 中正常工作：
input[id^='id'] {
background: red;
}
And here is the result:
结果如下：
IE7
IE7
IE8
IE8
IE9
IE9
IE10
IE10
As I saw in your pictures, your IE is rendering your page with Quirks Mode. Maybe you have no doctype or wrong doctype at your page. Make your doctype valid as below:
正如我在您的图片中看到的，您的 IE 正在使用Quirks Mode呈现您的页面。也许您的页面上没有文档类型或错误的文档类型。使您的文档类型有效，如下所示：
<!doctype html>
回答by madd0
That is precisely what classes are for. What you want is:
这正是类的用途。你想要的是：
.a { width: 100% }
回答by user1742628
Given a three-column table with 200 rows and each row having an individual id like this row:
给定一个包含 200 行的三列表，每行都有一个像下面这样的单独 id：
<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>
and given that you want to vertically center the content in each td, then the following css wildcard will cause the content of each td to be centered vertically** (I'm sure you could also use this to adjust width):
并且假设您想将每个 td 中的内容垂直居中，那么以下 css 通配符将导致每个 td 的内容垂直居中**（我确定您也可以使用它来调整宽度）：
tr[id^='row_'] > td {
vertical-align:middle
}
** One caveat - the third column in the table contains a Select in each td. While the anchor button in the first column and the text anchor in the second column are centered vertically in each td by using the above css, the Select in the third column does not respond to this css for some reason - but there is a fix. The following css will cause the Select elements to be properly centered vertically:
** 一个警告 - 表中的第三列在每个 td 中包含一个 Select。虽然第一列中的锚按钮和第二列中的文本锚使用上述 css 在每个 td 中垂直居中，但由于某种原因，第三列中的 Select 不响应此 css - 但有一个修复。以下 css 将导致 Select 元素正确地垂直居中：
tr[id^='pdfrow_'] > td > select {
margin-top:5px;
margin-bottom:5px
}
