Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Css дочерние селекторы: Селектор дочерних элементов — CSS

Дочерние селекторы

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберем небольшой код (пример 11.1).

Пример 11.1. Вложенность элементов в документе

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>

<html>

<body>

<div class=»main»>

<p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing

elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam

erat volutpat. </p>

<p><strong><em>Ut wisis enim ad minim veniam</em></strong>,

quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex

ea commodo consequat.

</p>

</div>

</body>

</html>

В данном примере применяется несколько контейнеров, которые в коде располагаются один в другом. Нагляднее это видно на дереве элементов, так называется структура отношений всех тегов документа между собой (рис. 11.1).

Рис. 11.1. Дерево элементов для примера 11.1

На рис. 11.1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу <DIV> выступает параграф <P>. Вместе с тем тег <STRONG> не является дочерним для тега <DIV>, поскольку он расположен в контейнере <P>.

Вернемся теперь к селекторам. Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий.

Селектор 1 > Селектор 2 { Описание правил стиля }

Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

Замечание

Дочерние селекторы не поддерживаются браузером Internet Explorer.

Если снова обратиться к примеру 11.1, то стиль вида P > EM { color: red } будет установлен для первого абзаца документа, поскольку тег <EM> находится внутри контейнера <P>, и не даст никакого результата для второго абзаца. А все из-за того, что тег <EM> во втором абзаце расположен в контейнере <STRONG>, поэтому нарушается условие вложенности.

По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности. Чтобы стало понятно, о чем идет речь, разберем следующий код (пример 11.2).

Пример 11.2. Контекстные и дочерние селекторы

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

<title>Дочерние селекторы</title>

<style type=»text/css»>

DIV I { /* Контекстный селектор */

color: green; /* Зеленый цвет текста */

}

DIV > I { /* Дочерний селектор */

color: red; /* Красный цвет текста */

}

</style>

</head>

<body>

<div>

<p><i>Lorem ipsum dolor sit amet</i>, consectetuer adipiscing

elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam

erat volutpat. </p>

</div>

<div>

<p><i>Lorem ipsum dolor sit amet</i>, consectetuer adipiscing

elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam

erat volutpat.</p>

</div>

</body>

</html>

В данном примере курсивный текст будет отображаться зеленым цветом из-за того, что дочерний селектор указан некорректно. В стиле прописано изменить цвет текста на красный у содержимого тега <I>, но только в том случае, если он непосредственно находится внутри <DIV>. А в нашем случае тег <I> располагается внутри <P>, поэтому стиль применяться не будет. Зато будет действовать контекстный селектор, который и задает зеленый цвет.

Заметим, что в большинстве случаев от добавления дочерних селекторов можно отказаться, заменив их контекстными селекторами. Однако использование дочерних селекторов расширяет возможности по управлению стилями элементов, что в итоге позволяет получить нужный результат, а также простой и наглядный код.

Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой — сюда относятся, например, таблицы и разные списки. В примере 11.3 показано изменение вида списка с помощью стилей. За счет вложения одного списка в другой получаем разновидность меню. Заголовки при этом располагаются горизонтально, а набор ссылок — вертикально под заголовками (рис. 11.2).

Рис. 11.2 Список в виде меню

Для размещения текста по горизонтали к селектору LI добавляется стилевой атрибут float. Чтобы при этом разделить между собой стиль горизонтального и вертикального списка и применяются дочерние селекторы.

Пример 11.3. Использование дочерних селекторов

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

<title>Дочерние селекторы</title>

<style type=»text/css»>

UL#menu > LI {

list-style: none; /* Убираем маркеры списка */

width: 120px; /* Ширина элемента в пикселах */

background: #ddd; /* Цвет фона */

color: maroon; /* Цвет текста */

padding: 5px; /* Поля вокруг текста */

font-family: Arial, sans-serif; /* Рубленый шрифт */

font-size: 90%; /* Размер шрифта */

font-weight: bold; /* Жирное начертание */

float: left; /* Располагаем элементы по горизонтали */

}

LI > UL {

list-style: none; /* Убираем маркеры списка */

padding: 0px; /* Убираем отступы вокруг элементов списка */

padding-top: 5px; /* Добавляем отступ сверху */

}

LI > A {

display: block; /* Ссылки отображаются в виде блока */

font-weight: normal; /* Нормальное начертание текста */

font-size: 90%; /* Размер шрифта */

background: #fff; /* Цвет фона */

border: 1px solid #666; /* Параметры рамки */

padding: 5px; /* Поля вокруг текста */

}

</style>

</head>

<body>

<ul id=»menu»>

<li>Редактор</li>

<li>Правка

<ul>

<li><a href=»undo. html»>Отменить</a></li>

<li><a href=»cut.html»>Вырезать</a></li>

<li><a href=»copy.html»>Копировать</a></li>

<li><a href=»paste.html»>Вставить</a></li>

</ul>

</li>

<li>Начертание

<ul>

<li><a href=»bold.html»>Жирное</a></li>

<li><a href=»italic.html»>Курсивное</a></li>

<li><a href=»emphasis.html»>Приятное</a></li>

</ul>

</li>

<li>Размер

<ul>

<li><a href=»small.html»>Так себе</a></li>

<li><a href=»normal. html»>Нормальный</a></li>

<li><a href=»middle.html»>Средний</a></li>

<li><a href=»big.html»>Недетский</a></li>

</ul>

</li>

</ul>

</body>

</html>

css — Как работают «Дочерние селекторы»?

Вопрос задан

Изменён 7 лет 2 месяца назад

Просмотрен 426 раз

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

Стиль распространяется на всех потомков, хотя, судя по описанию, он должен распространяться только на детей, а не на внуков или правнуков.

Источник

Вот пример:

table.special td>h2 {
  color: red; 
}
<table >
  <tr>
    <td><h2>Test Selector 1</h2>
      <table>
        <tr>
          <td>
            <h2>Test Selector 2</h2>
          </td>
        </tr>
      </table>
    </td> 
  </tr>
</table>

3

Нет, вы поняли неправильно.
Рассмотрим такой пример:

<section>
  <div>
    Потомок 1-го уровня
    <div>Потомок 2-го уровня</div>
  </div>
</section>
/* Случай А */
.container > .child {
  color: red;
}
/* Случай Б */
.container .child {
  color: red;
}

В случае А правило назначается на потомка первого уровня и наследуется потомком 2-го.
В случае Б правило назначается на потомков всех уровней.

Более точные пояснения:

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

.container > .child {
  color: red;
}
.level-2 {
  color: blue;
}
<section>
  <div>
    Потомок 1-го уровня
    <div>Потомок 2-го уровня</div>
  </div>
</section>

Во втором случае, чтобы изменить стили потомка второго уровня придется назначить селектор, вес которого не меньше, чем у предыдущего правила, поскольку элемент попадает в целевую выборку.

.container .child {
  color: red;
  text-decoration: underline;
}
/* Так не сработает */
.level-2 {
  color: blue;
}
<section>
  <div>
    Потомок 1-го уровня
    <div>Потомок 2-го уровня</div>
  </div>
</section>

Чтобы заработал второй случай, увеличим вес селектора

. container .child {
  color: red;
}
/* Вес селектора не меньше, чем в предыдущем правиле */
.container .level-2 {
  color: blue;
}
<section>
  <div>
    Потомок 1-го уровня
    <div>Потомок 2-го уровня</div>
  </div>
</section>

Всё работает в соответствии с документацией. В вашем правиле выбираются все потомки td (включая «внуков» и «правнуков») таблицы с классом special, а уже у них — только прямые.

Можете проверить на правиле table.special>tr>td>h2 {...}

9

В вашем примере, обе надписи покрасились в красный, т.к. обе подпадают под понятие «дочерние» т.е. h2 является дочкой td. У вас или всё работает, или ничего не работает если старый браузер (ie8 например)

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Справочник по функциям CSS

❮ Предыдущий Далее ❯

Функции CSS используются в качестве значений для различных свойств CSS.

Функция Описание
атрибут() Возвращает значение атрибута выбранного элемента
вычислить() Позволяет выполнять вычисления для определения значений свойств CSS
конический градиент() Создает конический градиент
счетчик() Возвращает текущее значение именованного счетчика
кубический Безье() Определяет кубическую кривую Безье
hsl() Определяет цвета с помощью модели Hue-Saturation-Lightness (HSL)
хсла() Определяет цвета с использованием модели Hue-Saturation-Lightness-Alpha (HSLA)
линейный градиент() Создает линейный градиент
макс() Использует наибольшее значение из списка значений, разделенных запятыми, в качестве значение свойства
мин() Использует наименьшее значение из списка значений, разделенных запятыми, в качестве значение свойства
радиальный градиент() Создает радиальный градиент
повторяющийся конический градиент() Повторяет конический градиент
повторяющийся линейный градиент() Повторяет линейный градиент
повторяющийся радиальный градиент() Повторяет радиальный градиент
RGB() Определяет цвета с использованием красно-зелено-синей модели (RGB)
rgba() Определяет цвета с помощью красно-зелено-сине-альфа-модели (RGBA)
переменная() Вставляет значение пользовательского свойства

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

23 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Top3 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Селектор дочерних элементов CSS | Краткий обзор дочернего селектора CSS

Дочерний селектор CSS определяется как селектор CSS, который выбирает только элементы, которые являются прямыми дочерними элементами, что более четко, чем контекстный селектор. Этот селектор использует больше, чем символ «>», который появляется между двумя разными селекторами, и он более специфичен, чем селектор потомков, что помогает упростить код стиля CSS. Второй селектор должен быть непосредственным потомком элементов.

Синтаксис

Общий формат селектора CSS задается как

 Элемент1 > элемент 2
{
// код свойств стиля….;
}

Element1 — родительский, element2 — дочерний селектор.

Как работает дочерний селектор в CSS?

Рабочий процесс очень прост. Этот дочерний селектор имеет два селектора для работы, разделенных символом «>». Первый селектор говорит, что это родительский элемент, а второй селектор говорит, что это дочерний элемент со свойствами стиля.

Здесь давайте возьмем образец древовидной структуры для данного HTML-документа

Например, если HTML-код выглядит следующим образом: На приведенной выше диаграмме каждый элемент является либо родительским, либо дочерним, что, в свою очередь, формирует отношение родитель-потомок. . Корневой элемент здесь — это элемент body, который имеет двух дочерних элементов p и ul. Итак, здесь у элемента p всегда есть только один родитель, у которого может быть много дочерних элементов em и strong соответственно. Чтобы выбрать p, нам нужно задать правило типа body > p. Предположим, что если нам нужно выбрать элемент «A» с помощью селектора, мы бы дали правило типа strong > A  , что-то вроде p> a ; невозможно использовать дочерние селекторы.

 Дел > p
{
размер шрифта: 12px;
}

Таким образом, в приведенном выше примере кода элемент

является родительским, за которым следует дочерний элемент

. Таким образом, приведенное выше правило оператора делает любой абзац размером 12 пикселей.

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

Примеры реализации дочернего селектора CSS

В этом разделе мы кратко рассмотрим дочерний селектор на примерах. Итак, давайте начнем.

Пример #1

Код: 

 

<голова>
<стиль>
дел > р {
цвет фона: лосось;
размер шрифта: 20 пикселей;
отступ: 3px;
}


<тело>
<дел>

Этот абзац находится под элементом div


Этот абзац3 находится под элементом div. 


Этот абзац не находится под элементом div. Поскольку это не дочерний элемент div


 Даже этот абзац находится под элементом div.

Этот абзац не находится под элементом div.

Этот абзац не находится под элементом div.

Объяснение: Здесь мы используем селектор div > p, который говорит, что div является родителем, и выбирает дочерний элемент p, который является дочерним элементом. Здесь дочерние элементы выделены цветом. Дочерний селектор для приведенного выше кода будет выглядеть так.

Вывод:

Пример #2

Код: 

 

<голова>
 Пример дочернего селектора CSS

<тело>

Столицы штатов США

<стиль>
пр > ли {
цвет синий;
вес шрифта:жирнее;
}
ли > промежуток {
цвет: зеленый;
вес шрифта: нормальный;
}

<ол тип="А">

  •  Алабама
<ул>

  • Монтгомери
    • 




  • Аризона
<ул>

  • Феникс
    • 




  •  Калифорния
<ул>

  • Сакраменто
    • 




  •  Новая майка
<ул>

  • Трентон
    • 




  • Вашингтон
<ул>

  • Олимпия
    • 



  •  Пенсильвания
<ул>


  • Гарисбург
    •

    Объяснение: Этот код говорит, что элемент тега ol является родительским, а li — дочерним. Так как у нас много дочерних элементов

  • . Это означает, что
  • является прямым дочерним элементом, для которого применяется стиль. Все это выбранное, которое выделено зеленым цветом. Теперь вывод выглядит так.

    Вывод:

    Пример #3

    Код:

    Нацеливание на жирный элемент с использованием дочернего селектора

     
<тип стиля="текст/CSS">
div.select > б {
оранжевый цвет;
}

<тело>
<дел>
Контент 1
<дел>
Контент 2
<дел>
Контент 3
    • Последний контент.

    Объяснение: Приведенный выше код говорит, что дочерний селектор выбирает класс div, за которым следует элемент . Поэтому содержимое первого элемента b и последнего элемента b выглядят стильно.

    Вывод:

    Пример #4

    Код: 

     
 Детский селектор
<стиль>
тело > ол > ли
{
цвет: #6A5ACD;
}

<тело>
<ол>

  • Содержимое списка, представленное здесь, выделено синим цветом. 
    • 

<дел>
<ул>

  • Здесь текстовый контекст не оформлен в этом списке .
<ол>

  • Поскольку элемент не дочерний .
    •

    Вывод:

    Для того же HTML-кода выше. Давайте посмотрим на другой выбор дочерних элементов.

    Код: 

     body > div > ul
{
цвет: #BA55D3;
}
  Вывод:

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

    Пример #5

    Код: 

     

<голова>
HTML: теги strong и em
<стиль>
тело > р > а {цвет: #BA55D3;
размер шрифта: 20px;
семейство шрифтов: Georgia, Times, "Times New Roman", с засечками;}


<тело>
 
    От Всемирной организации здравоохранения 
     

    Эта пандемическая болезнь COVID-19является инфекционным заболеванием, вызывающим заболевания органов дыхания.  Он распространяется, когда зараженный человек чихает или кашляет. И  все меры общественного здравоохранения и другие социальные меры принимают рискованную работу на своем рабочем месте, что является основой  Время выздоровления от этой опасной болезни неизвестно.
    

    Подробнее читайте здесь

    Вывод:

    Пример #6

    Демонстрация дочернего селектора с использованием элемента Span и div

    Код: 

     
<стиль>
охватывать {
цвет фона: #00FFFF;
}
раздел > диапазон {
цвет фона: #FF4500;
}

<дел>
Это первое содержимое Span в элементе div.
Второй интервал под элементом div.
    Это содержимое диапазона не включено в div.

    Вывод:

    Заключение

    Поэтому в этой статье мы объяснили, как использовать дочерний селектор CSS с их синтаксисом и примерами.

    Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *