Скрыть все дочерние классы div.class в TD, а затем показать сначала дочерний класс div.class

Следующее должно работать в теории, насколько мне известно, но это не так:

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 есть два элемента small.attachments, один за другим (в приведенном выше примере), ОБА скрываются, и правило первого ребенка не действует.

В чем дело?

PS: я тестировал в Safari и Firefox.

Источник

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>

Спасибо за переподготовку!

Источник

Ненавижу говорить это, но "Это работает для меня", посмотрите этот пример JSBin:

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

Обновленная версия: http://jsbin.com/ovuro4/3/edit на основе ваших отзывов ниже.

Как я понимаю из вашего поста, в этом случае "Файлы" -> "Содержимое A + B" должно быть видимым, а "Файлы" -> "Содержимое B" не должно быть видимым. Вот как это выглядит для меня, в Safari и FF.

Источник
Другие вопросы по тегам