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兄弟，它就会很好地显示，应用了第一个子规则并覆盖display：none规则。

但是，如果TD中有两个small.attachments元素，一个接一个（在上面的示例中）， BOTH 将被隐藏，并且第一个子规则无效。

发生了什么事？

PS：我在Safari和Firefox中测试过。

Answer 1

讨厌这样说，但“它适用于我”，请参阅此JSBin示例：

http://jsbin.com/ovuro4/（http://jsbin.com/ovuro4/edit）

根据您的反馈更新版本：http://jsbin.com/ovuro4/3/edit。

我从您的帖子中了解到的结果是，在这种情况下，“文件” - ＆gt;应该可以看到“内容A + B”，而“文件” - > “内容B”不应该是可见的。这就是它在Safari和FF中出现的方式。

Answer 2

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

作为符合IE标准的修补程序，我使用jQuery以<small>为基础将<div>元素打包在<td>基础上。

然后规则按预期工作并按照规范进行。

<script type="text/javascript">

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

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

  });

</script>

感谢您的复习！

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

2 个答案: