IE8 动态元素上的第一个子伪类答案

【问题标题】：IE8 first-child pseudo class on dynamic elementsIE8 动态元素上的第一个子伪类
【发布时间】：2014-05-08 03:48:41
【问题描述】：

我正在使用 AJAX 生成搜索结果，并且我正在使用 first-child 伪类从第一个结果中删除 margin-top。不幸的是，这个类似乎不适用于 IE8。

我正在使用<!DOCTYPE html>，它应该允许 IE8 接受第一个子类，但经过一些研究，似乎将第一个子类应用于动态插入的元素，不起作用。

有没有人知道一个快速简便的解决方法？谢谢！

请记住，这些 div 是动态生成的，因此手动将类添加到第一个结果 div 是不可能的，至少对于直接 HTML。

【问题讨论】：

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

【解决方案1】：

如何提供结果？为了浏览器兼容性，我会让第一个项目有一个特定的类，可以通过 CSS 定位：

HTML：

  <div class="item first-item">Item One</div>
  <div class="item">second item</div>
  <div class="item">second item</div>
  <div class="item last-item">last item</div>

CSS：

  <style>
    .item { margin:8px 0; }
    .item.first-item { margin:0 0 8px; }
    .item.last-item { margin:8px 0 0; }
  </style>

【讨论】：

它们是通过 AJAX 调用动态插入的，所以很遗憾我无法为第一个结果设置特定的类，至少不能使用纯 HTML/CSS。
当然可以，只要将插入后的类/样式添加到特定元素即可。
@APAD1，如果您无法将 html 更改为您需要的方式，您可以定位相邻元素以覆盖默认行为。这应该让您为第一项赋予属性，然后为其他所有内容使用其他东西。 msdn.microsoft.com/en-us/library/aa358818%28VS.85%29.aspx

【解决方案2】：

一个。对第一个结果元素使用 id 属性并重置边距。

b.结果使用margin-bottom代替margin-top，如果需要，重置最后一个元素的margin

c。如果容器中有结果，可以将容器的 margin-top 设置为负值，等于第一个结果的 margin top 的值

等等。使用纯 CSS 完成此任务的方法有很多。祝你好运。

【讨论】：