Question

假设我的项目具有相似的ID：

<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

Answer 1

input[id^='id_']{width:200px;}应该有效。它确实在这个小提琴中起作用：

http://jsfiddle.net/jYZnX/

编辑：另外，要显示它没有选择没有ID开头的输入'id_'：

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

编辑2：由于您的文档模式似乎设置为 Quirks ，这将导致css选择器出现问题。正确设置您的文档类型，例如使用<!DOCTYPE HTML>。这将需要访问网页的原始代码，所以如果没有它，你将处于困扰的地方。

Answer 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正在使用怪癖模式呈现您的页面。也许您的页面上没有doctype或错误的doctype。使您的doctype有效，如下所示：

<!doctype html>

Answer 3

我的回答很笼统，而且从未与问题直接相关，因为它已经很老了，到目前为止，还可以通过此页面上的其他答案解决。

此答案的第一部分是干理论，对理解这些选项很有帮助。
第二部分是使用该理论的一个例子。

1）属性选择

Substring matching attribute selectors：

[att^=val]
表示一个具有att属性的元素，其值以前缀“ val”开头。如果“ val”是空字符串，则选择器不代表任何内容。

[att$=val]
表示一个具有att属性的元素，其值以后缀“ val”结尾。如果“ val”是空字符串，则选择器不代表任何内容。

[att*=val]
表示一个具有att属性的元素，其值包含至少一个子字符串“ val”的实例。如果“ val”是空字符串，则选择器不代表任何内容。

此外，还有更多选择器，在规范中，它们在 Attribute presence and value selectors 一章中进行了排序：

[att]
表示具有att属性的元素，无论该属性的值如何。

[att=val]
表示一个具有att属性的元素，其值恰好是“ val”。

[att~=val]
表示一个具有att属性的元素，其值是一个由空格分隔的单词列表，其中一个恰好是“ val”。如果“ val”包含空格，则它将永远不会代表任何内容（因为单词由空格分隔）。同样，如果“ val”是空字符串，则它将永远不代表任何内容。

[att|=val]
表示一个具有att属性的元素，其值要么完全是“ val”，要么以“ val”开头，紧随其后的是“-”（U + 002D）。

2）示例如何根据事件选择页面上的多个内容

通配符在触发事件（如使用特殊的哈希标签访问页面）时特别有用。相比之下，对于完全静态的页面，它们也很有用，但仍可能会有所不同，即使是更多CSS代码。

假设访问带有井号action的页面，则URL如下所示：

https://example.com/index.html#action

虽然只触发了一个ID，就像我们可以使用它来记录CSS中的一整堆相关动作一样，但是我们只需要用ID action将元素发生的整个区域封闭起来：

/* all div-elements which are direct child of element with class `wrapper` are hidden: */

.wrapper>div {
  display: none;
}


/* following line addresses all elements inside element with the id "action"
   where the id is starting with "action_". This is only triggered when the
   URL with hashtag "action" is called, because of usage of ":target":
*/

#action:target [id^="action_"] {
  display: block;
}


/* following line addresses all elements inside element with the id "amother-action"
   where the class is "another-action". This is only triggered when the
   URL with hashtag "another-action" is called, because of usage of ":target".
   This example shows that we never need ids but can use classes too:
*/

#another-action:target .another-action {
  display: block;
}

<div id="action">
  <div id="another-action">
    <div class="wrapper">
      <!-- this small menu is always shown as it's an unordered list and no div: -->
      <ul>
        <li><a href="#">No Action / Reset</a></li>
        <li><a href="#action">Action</a></li>
        <li><a href="#another-action">Another Action</a></li>
      </ul>
      <!-- The following div-elements are by default hidden and
           only shown when some event is triggered: -->
      <div id="action_1" class="another-action">
        <!-- this is on both actions shown as the div has an id starting
               with "action" and also a class "another-action" -->
        Hello
      </div>
      <div id="action_2">
        <!-- this is above only triggered by the CSS-rule 
               #action:target [id^="action_"] -->
        World!
      </div>
      <div class="another-action">
        <!-- This is above only triggered by the CSS-rule
               #another-action:target .another-action -->
        Everybody!
      </div>
    </div>
  </div>
</div>

不同的结果是这些

在没有任何哈希的情况下调用页面时，仅显示菜单：

动作

另一项行动

使用哈希action调用页面时，可以在菜单下面看到：

你好
世界！

使用哈希another-action调用页面时，可以在菜单下方看到以下内容：

你好
大家！

像这样，我们可以混合很多内容，其中每个分区仅在特殊情况下显示。仅当具有id的元素包含具有content和select-able属性的元素时，才可以混合使用多个ID和类。在上面的示例中，您可以看到HTML中的所有内容都写在<div id="action"><div id="another-action">和</div></div>之间，这样，每个使用过的事件都可以选择触发其之间内容中的所有内容。

自然，CSS也可以将此方法用于其他效果。隐藏或显示元素只是一个简单的示例，但您可以通过CSS更改颜色，启动CSS动画以及执行许多其他操作。

请注意不要在任何这些元素中发布任何机密信息，因为此CSS解决方案不具有安全性，只能用于区分可视化显示案例。您隐藏或显示的所有内容在HTML源代码中始终可见。

Answer 4

这正是班级的用途。你想要的是：

.a { width: 100% }

Answer 5

给定一个包含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>

并且假设您想要在每个td中垂直居中内容，那么以下css通配符将导致每个td的内容垂直居中**（我确信您也可以使用它来调整宽度）：

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

**一个警告 - 表格中的第三列包含每个td中的Select。虽然第一列中的锚点按钮和第二列中的文本锚点通过使用上面的css在每个td中垂直居中，但是由于某种原因，第三列中的Select不响应此css - 但是有一个修复。以下css将使Select元素垂直正确居中：

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

有没有办法在css id标签中使用通配符

5 个答案:

IE7

IE8

IE9

IE10