隐藏所有TD的div.class子级，然后显示第一个div.class子

Question

据我所知，以下几点在理论上应该有效，但不是：

​

td small.attachments {
  display: none;
}
td small.attachments:first-child {
  display: inline-block !important;
}

<table>
  <tr>
    <td class="views-field-field-entry-images-fid">
      <a href="#"><img src="x.jpg" /></a>
      <small class="attachments">Files<div class="file-listing">Content A + B</div></small>
      <small class="attachments">Files<div class="file-listing">Content B</div></small>
      <small class="links">Links<div class="file-listing">Content C</div></small>
    </td>
  </tr>
</table>

​

结果是，每当small.attachments元素没有small.attachment兄弟节点时，就会显示得很好，并应用了第一个子规则并覆盖显示:无规则。

但是，当TD中有两个small.attachments元素时，一个接一个(例如上面的例子)，和都是隐藏的，并且第一个子规则没有任何影响。

到底怎么回事？

PS:我在Safari和Firefox中进行了测试。

Answer 1

所以我似乎误解了“第一个孩子”财产的意图。

作为符合IE的修补程序，我使用jQuery在每个<td>的基础上将<small>元素包装在<div>中。

然后，这些规则按照预期并按照规范工作。

<script type="text/javascript">

  $("td.views-field-field-entry-images-fid").each(function() {

    $(this).children("small").wrapAll("<div class='attachments-wrapper'></div>");

  });

</script>

谢谢你的提神！

Answer 2

不想这么说，但是“它对我有用”，请参见下面的JSBin示例：

http://jsbin.com/ovuro4/ ( http://jsbin.com/ovuro4/edit )

更新版本：http://jsbin.com/ovuro4/3/edit基于您的反馈下面。

我从您的文章中了解到的结果是，在这种情况下，"Files“-> "Content A+ B”应该是可见的，而"Files“-> "Content B”则不应该可见。在Safari和FF中，我就是这样发现的。