: nth-child для нацеливания на вложенные div - PullRequest
1 голос
/ 04 мая 2019

У меня проблемы с поиском способа сделать это.Это моя структура:

<div class="flex_container">
    <div class="flex_item_9">
        <div class="flex_label">First Label</div>
        <div class="flex_data">Some Data</div>
    </div>
    <div class="flex_item_9">
        <div class="flex_label">Second Label</div>
        <div class="flex_data">Some Data</div>
    </div>
    <div class="flex_item_9">
        <div class="flex_label">Third Label</div>
        <div class="flex_data">Some Data</div>
    </div>
</div>

Эта структура div повторяется в цикле PHP While Loop при извлечении из базы данных.На рабочем столе я хотел бы скрыть div flex_label после отображения первого.Я хочу показывать метки только один раз для каждого цикла while.Я подумал, что nth-child будет работать, поэтому я попробовал следующее в моем CSS.

div.flex_container .flex_label:nth-child(2) {
      display: none;
}

Но не дал результатов.В браузере ничего не изменилось.Были отображены все flex_labels.

Это то, что может быть обработано в CSS, или мне нужно будет включить что-то в мой цикл while, чтобы добавить дополнительные классы в каждый блок DIV?

EDIT

Если было отображено 3 элемента:

<div class="flex_container">
  <div class="flex_item_9">
    <div class="flex_label">SHOW LABEL</div>
    <div class="flex_data">Some Data</div>
  </div>
  <div class="flex_item_9">
    <div class="flex_label">SHOW LABEL</div>
    <div class="flex_data">Some Data</div>
  </div>
  <div class="flex_item_9">
    <div class="flex_label">SHOW LABEL</div>
    <div class="flex_data">Some Data</div>
  </div>
</div>
<div class="flex_container">
  <div class="flex_item_9">
    <div class="flex_label">* HIDE LABEL</div>
    <div class="flex_data">Some Data</div>
  </div>
  <div class="flex_item_9">
    <div class="flex_label">* HIDE LABEL</div>
    <div class="flex_data">Some Data</div>
  </div>
  <div class="flex_item_9">
    <div class="flex_label">* HIDE LABEL</div>
    <div class="flex_data">Some Data</div>
  </div>
</div>
<div class="flex_container">
  <div class="flex_item_9">
    <div class="flex_label">* HIDE LABEL</div>
    <div class="flex_data">Some Data</div>
  </div>
  <div class="flex_item_9">
    <div class="flex_label">* HIDE LABEL</div>
    <div class="flex_data">Some Data</div>
  </div>
  <div class="flex_item_9">
    <div class="flex_label">* HIDE LABEL</div>
    <div class="flex_data">Some Data</div>
  </div>
</div>

Моя цель - сделать так, чтобы это отображалось как электронная таблица на рабочем столе.Одна строка меток и несколько строк данных.Мобильный дисплей будет другим, но уже работает.

1 Ответ

1 голос
/ 04 мая 2019

Должны работать следующие селекторы:

/* flex_label inside flex_container that is 2nd (or 3rd or 4th or ...) child */
.flex_container:nth-child(n + 2) .flex_label {}


/* flex_label inside flex_container that follows a flex_container */
.flex_container ~ .flex_container .flex_label {}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...