隱藏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中爲我呈現的方式。