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

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

0 голосов
/ 07 января 2011

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

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, он отображается нормально, с применением правила первого ребенка и переопределениемна дисплее: правило отсутствует.

Однако, когда в TD есть два элемента small.attachments, один за другим (в примере выше), ОБА скрыты, а первый -Дочернее правило не действует.

Что происходит?

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

Ответы [ 2 ]

0 голосов
/ 08 января 2011

Так что, похоже, я неправильно понял намерение свойства "first-child".

В качестве исправления, совместимого с 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>

Спасибо за повышение квалификации!

0 голосов
/ 07 января 2011

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

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

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

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

...