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 兄弟がない場合はいつでも、first-child ルールが適用され、display:none ルールがオーバーライドされて、正常に表示されます。

ただし、TD に 2 つの small.attachments 要素が次々にある場合 (上記の例)、両方が非表示になり、first-child ルールは効果がありません。

どうしたの？

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>要素を個別にラップし<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 に答える