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

但是，当一个TD中有两个small.attachments元素（如上例）时，两个都是隐藏的，并且第一个子规则不起作用。

发生了什么事？ PS：我已经在Safari和Firefox上测试过了。

Answer 1

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

作为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> 

感谢您的复习！

Answer 2

讨厌这样说，但 “我的作品”，看到这个JSBin例如：

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

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

根据我的理解，你的帖子中的结果是，在这种情况下，“文件” - >“内容A + B”应该是可见的，而“文件” - >“内容B”不应该是可见的。这就是它在Safari和FF中为我呈现的方式。