Блог

Главная - Вопросы по программированию - Как я могу использовать первого типа или второго ребенка, чтобы ориентироваться только на один верхний уровень. Не тот, вложенный?

Как я могу использовать первого типа или второго ребенка, чтобы ориентироваться только на один верхний уровень. Не тот, вложенный?

#css #css-selectors

Вопрос:

Здравствуйте, я хочу, чтобы целевой класс = «раздел», Как я могу использовать первый тип или первый дочерний элемент для таргетинга только на верхний уровень. Не тот, вложенный?

     .site-content > .section-wrap > .section {
        margin-top: 1.5vmax;
    }


<div class="site-content">
    <div class="section-wrap">
        <div class="section">Target This</div>
        <div class="section">Target This</div>
        <div class="section">Target This
            <div class="site-content">
                <div class="section-wrap"></div>
                <div class="section">Not this</div>
            </div>
        </div>
        div class="section">Target This</div>
        div class="section">Target This</div>
        </div>
</div>

Ответ №1:

Вы не сможете использовать :первый по типу или :первый потомок, чтобы ориентироваться только на один верхний уровень и игнорировать вложенный.

Оба этих псевдо-селектора css проверяют ребенка на наличие непосредственного родителя. введите описание изображения здесь

Например :первый тип работает как: введите описание изображения здесь

И :первенец работает как: введите описание изображения здесь

Комментарии:

1. Я думал, что смогу нацелиться на первый контент сайта, используя первый тип

2. Да, люди часто путают с таким поведением. Если вы посмотрите на приведенный выше скриншот, объясняющий :первый тип, он по-прежнему выделяет 3 абзаца. @BlueLi Оба :первый тип и :первый дочерний элемент полезны для выбора непосредственного дочернего элемента элемента, а не любого из них во вложенном DOM.

3. @BlueLi Если вы считаете, что этот ответ помог, пожалуйста, проголосуйте и отметьте его как свой ответ. Спасибо 🙂

Ответ №2:

В соответствии с вашей разметкой

 .site-content > .elementor-section-wrap   .elementor-section

если вы не хотите выбирать вложенный, вы делаете это с помощью :не селектор

 :not(.site-content)  .site-content > .elementor-section-wrap   .elementor-section

Комментарии:

1. Я допустил ошибку в разметке, я обновил вопрос. Пожалуйста, взгляните еще раз, спасибо

Ответ №3:

Если ваш опубликованный HTML-код обернут только body элементом, вы можете использовать этот селектор:

 body > .site-content > .section-wrap > .section {
    margin-top: 1.5vmax;
}

Если между body вами и вашим первым уровнем есть еще один элемент .site-content , включите его в селектор, также используя > оператор для прямых потомков.

Метки: , ,