0

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

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元素时，一个接一个（在上面的示例中），两者都被隐藏，并且第一个子规则无效。

这是怎么回事？

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

4

2 回答 2

0

讨厌这样说，但“它对我有用”，请参阅这个 JSBin 示例：

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

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

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

于 2011-01-07T18:43:56.220 回答
0

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

作为一个符合 IE 的修复程序，我使用 jQuery 将<small>元素包装在 a<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>

感谢您的复习！

于 2011-01-07T21:02:39.833 回答