CSS :first-child 选择器 IE7答案

【问题标题】：CSS :first-child selector IE7CSS :first-child 选择器 IE7
【发布时间】：2013-01-23 08:50:29
【问题描述】：

我有一点 IE7 问题。我有以下 CSS 代码，但它在 IE7 中不起作用。但是， .row [class*="span"] 和 :first-child 如果没有组合在一起，它们都可以工作。有没有办法做类似的事情或让它以某种方式工作？

.row [class*="span"]:first-child {
    margin-left: 0;
}

【问题讨论】：

IE7 中的错误？不可能
为什么需要使用括号选择器？
即选择所有具有span1、span2等类的对象...
尝试使用 className 而不是 class
啊。 “如果属性选择器的右方括号 ] 紧随其后是元素类型选择器，则该规则被解析为好像在选择器之间存在后代组合子（即空格），而不是应有的失败。 " reference.sitepoint.com/css/css3attributeselectors

标签： css internet-explorer-7 css-selectors

【解决方案1】：

如果第一个子是 [class*="span"]，检查它之前是否有 HTML 注释。如果有，IE7 will mistakenly think the comment is the first child，所以它与您要查找的元素不匹配。

如果您无法更改标记以删除评论，您可以使用我描述的覆盖技术here：

.row [class*="span"] {
    margin-left: 0;
}

.row [class*="span"] ~ [class*="span"] {
    margin-left: /* Reset the left margin for other elements */;
}

如果您不知道将其重置为的边距值，您可以尝试使用* + html hack 添加另一个针对 IE7 行为的选择器：

.row [class*="span"]:first-child, * + html .row :first-child + [class*="span"] {
    margin-left: 0;
}

:first-child + [class*="span"] 匹配该元素，如果它恰好跟在一个注释节点之后，该注释节点是 IE7 中的第一个子节点。

【讨论】：

你说得对，我在第一个孩子之前发表了评论……我一删除它，就开始工作了。
作为 IE7 :first-child 和兄弟组合 (+) 错误的自动解决方法，您可以在页面加载后通过 JavaScript remove comments as DOM nodes。