有没有办法在css id标签中使用通配符
Bjo*_*son 29 css css-selectors
假设我有几个具有类似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;}
ano*_*ery 29
input[id^='id_']{width:200px;}应该管用.它肯定在这个小提琴:
编辑:另外,为了表明它没有选择没有id开头的输入'id_':
编辑2:由于您的文档模式似乎设置为Quirks,这将导致css选择器出现问题.正确设置您的doc类型,例如使用<!DOCTYPE HTML>.这将需要访问网页的原始代码,所以没有它你将在一个麻烦的地方.
我的回答非常笼统，与问题没有直接关系，因为这已经很老了，到目前为止已由本页上的其他答案解决。
这个答案的第一部分是干理论，这对于理解选项很有用。
第二部分是该理论的应用实例。
1) 属性选择器
[att^=val]
表示具有 att 属性的元素，其值以前缀“val”开头。如果“val”是空字符串，则选择器不代表任何内容。
[att$=val]
表示具有 att 属性的元素，其值以后缀“val”结尾。如果“val”是空字符串，则选择器不代表任何内容。
[att*=val]
表示具有 att 属性的元素，其值至少包含一个子字符串“val”的实例。如果“val”是空字符串，则选择器不代表任何内容。
此外，还有更多选择器，在规范中，它们在属性存在和值选择器一章中排序：
[att]
表示具有 att 属性的元素，无论该属性的值是什么。
[att=val]
表示具有 att 属性且其值恰好为“val”的元素。
[att~=val]
表示具有 att 属性的元素，其值为以空格分隔的单词列表，其中之一正是“val”。如果“val”包含空格，它永远不会代表任何内容（因为单词之间用空格分隔）。此外，如果“val”是空字符串，它永远不会代表任何东西。
[att|=val]
表示具有 att 属性的元素，其值要么正好是“val”，要么以“val”开头，紧接着“-”(U+002D)。
2) 如何根据事件在页面上选择多个内容的示例
当触发事件（例如使用特殊哈希标签访问页面）时，通配符尤其有用。相比之下，对于完全静态的页面，它们也很有用，但仍然可以注意到不同，即使它会包含更多 CSS 代码。
假设使用 hash-tag 访问页面action，因此 URL 将如下所示：
https://example.com/index.html#action
虽然只有一个 id 被触发，我们可以用它来记录 CSS 中的一整堆相关操作，但我们只需用 id 包围元素中将发生某些事情的整个区域action：
https://example.com/index.html#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;
}不同的结果如下：
- 当没有任何哈希调用页面时，仅显示菜单：
- 行动
- 另一个动作
- 当使用 hash 调用页面时
action，可以看到下面的菜单：
你好
世界！
- 当使用 hash 调用页面时
another-action，在菜单下方可以看到：
大家好
！
像这样，我们可以混合很多内容，其中每个部分仅在特殊情况下显示。仅当具有 id 的元素包含具有内容和可选属性的元素时，混合多个 id 和类才有效。在上面的示例中，您可以看到 HTML 中的所有内容都写在<div id="action"><div id="another-action">和之间</div></div>，这样每个使用的事件都可以选择触发之间内容中的所有内容。
当然，CSS 也可以使用此方法来实现其他效果。隐藏或显示元素只是一个简单的示例，但您可以更改颜色、启动 CSS 动画以及通过 CSS 执行许多其他操作。
请注意不要在任何这些元素中发布任何机密内容，因为此 CSS 解决方案不安全，而仅用于区分视觉显示的情况。像这样隐藏或显示的任何内容在 HTML 源代码中始终可见。
小智 5
您使用的选择器（^）在IE中可以正常工作：
input[id^='id'] {
background: red;
}
结果如下：
IE7
IE8
IE9
IE10
正如我在您的图片中看到的那样，您的IE正在使用Quirks Mode渲染您的页面。也许您的页面没有文档类型或错误的文档类型。使您的文档类型有效，如下所示：
<!doctype html>
mad*_*dd0 -1
这正是课程的目的。你想要的是：
.a { width: 100% }
- 一般来说，这些并不是 a 类的所有实例，我不想影响所有实例。 (2认同)
- 为什么不向那些你想影响的人应用课程呢？ (2认同)
- 然后创建一个新类。根据定义，如果所有 id_* 的行为都相同，则它们属于同一类（用英语术语，而不是 CSS），因此您可以为该行为创建一个 CSS 类。如果 `a` 不好，则创建一个新的 `<input class="a newClass" id="id_2"/>` (2认同)
| 归档时间： |
|
| 查看次数： |
40511 次 |
| 最近记录： |