Соседние селекторы css: Соседние селекторы | htmlbook.ru

Содержание

Соседние селекторы | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.08.0+1.0+3.5+1.0+1.0+1.0+1.0+

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.

Синтаксис

E + F { Описание правил стиля }

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

<p>Lorem ipsum <b>dolor</b> sit amet. </p>

Тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, не влияет на их отношение.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Соседние селекторы</title>
  <style>
   b + i {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
   <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit. ="значение"]
  • [атрибут|="значение"]
  • [атрибут~="значение"]
  • Вложенные селекторы
  • Дочерние селекторы
  • Идентификаторы
  • Классы
  • Статьи по теме

    Рецепты CSS

    Соседние селекторы | CSS | WebReference

    • Содержание
      • Синтаксис
      • Пример
      • Примечание
      • Спецификация
      • Браузеры

    Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.

    Синтаксис

    E + F { Описание правил стиля }

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

    <p>Lorem ipsum <b>dolor</b> sit amet.</p>

    Элемент <b> является дочерним по отношению к <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

    <p>Lorem ipsum <b>dolor</b>  <var>sit</var> amet.</p>

    Элементы <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, не влияет на их отношение.

    <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

    Соседними здесь являются элементы <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

    Обозначения

    ОписаниеПример
    <тип>Указывает тип значения.<размер>
    A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
    A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
    A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
    [ ]Группирует значения.[ crop || cross ]
    *Повторять ноль или больше раз.[,<время>]*
    +Повторять один или больше раз.<число>+
    ?Указанный тип, слово или группа не является обязательным.inset?
    {A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
    #Повторять один или больше раз через запятую.<время>#

    Пример

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Соседние селекторы</title> <style> b + i { color: red; /* Красный цвет текста */ } </style> </head> <body> <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> </body> </html>

    Результат данного примера показан на рис. 1.

    Рис. 1. Красный цвет текста для соседних селекторов

    Примечание

    Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (B + /* плюс */ I).

    Спецификация

    СпецификацияСтатус
    CSS Selectors Level 3Рекомендация
    CSS 2. 1Рекомендация

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
    • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft (Черновик спецификации) — первая черновая версия стандарта.

    Браузеры

    781213. 511
    1141

    Браузеры

    В таблице браузеров применяются следующие обозначения.

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

    Число указывает версию браузера, начиная с которой свойство поддерживается.

    Родственные селекторы
    Ctrl+

    Селекторы атрибутов
    Ctrl+

    Автор и редакторы

    Автор: Влад Мержевич

    Последнее изменение: 30.08.2017

    Редакторы: Влад Мержевич

    Селектор смежных братьев и сестер

    Веб-обзор
    июль 2000 г.

    Как было показано в предыдущих статьях этой серии, в CSS появилось несколько новых интересных селекторов. Между универсальным селектором и дочерним селектором можно создать селекторы, которые были бы практически невозможны при использовании традиционных селекторов в стиле CSS1.

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

    Как это работает

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

     h2 + P {верхнее поле: 0;}
     

    Правило будет применяться ко всем абзацам, которые следуют непосредственно за элементом h2 и имеют один и тот же родительский элемент.

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

    Давайте рассмотрим это подробнее. Некоторое время изучите представление в виде дерева на рис. 1.


    Рис. 1. Поиск соседних одноуровневых элементов с помощью дерева документов.

    Одним из примеров смежных элементов одного уровня являются элементы EM и STRONG внутри абзаца. На самом деле единственное место на рис. 1, где элементы не имеют смежных братьев и сестер, это место, где у них вообще нет братьев и сестер, например, элемент A ; и в неупорядоченном списке с тремя LI детьми. Там первый и третий элементов LI

    не являются соседними. Первый и второй являются смежными, так же как второй и третий, но первый и третий разделены вторым и, следовательно, не являются смежными.

    Допустим, мы хотим, чтобы текст STRONG был зеленым, но только тогда, когда он следует за текстом EM . Правило для этого:

     EM + STRONG {цвет: зеленый;}
     

    Вернувшись к рисунку 1, мы видим, что элемент STRONG , являющийся частью абзаца, будет зеленым, а элемент STRONG , являющийся частью LI , — нет. Обратите внимание, что это верно, несмотря на то, что внутри абзаца может быть текст, который находится между 9Элементы 0016 EM и STRONG . Например:

     

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

    Текст между элементами не влияет на работу селектора. Это справедливо даже для элементов блочного уровня. Рассмотрим:

    <дел>
     

    Привет, элемент h4

    Вот некоторый текст, который является частью DIV, и не содержится в его дочернем элементе.

    Это короткий абзац

    Мы можем сделать абзац серым, используя следующее правило:

     h4 + P {цвет: серый;}
     

    Помните, что смежный селектор заботится только об элементах и ​​их месте в структуре документа. Вот почему текст эффективно игнорируется. (Технически это часть DIV и поэтому находится «на один уровень выше» в дереве документа, как часть родительского DIV .)

    Объединение с другими селекторами

    любой абзац, который следует за h4 , независимо от того, где в документе это происходит. Если мы хотим выбрать только те абзацы, которые следуют за заголовками уровня h4, которые содержатся в разделе (

    DIV ), то мы должны написать:

     DIV h4 + P {color: grey;}
     

    Предположим, мы хотим сузить его еще больше: мы хотим, чтобы этот серый цвет возникал только тогда, когда элементы h4 и P являются дочерними элементами DIV (в отличие от потомков любого уровня). В этом случае пишем:

     DIV > h4 + P {цвет: серый;}
     

    Теперь давайте немного обобщим. Предположим, мы хотим, чтобы любой элемент, следующий за h4 , который является потомком DIV , был окрашен в серый цвет. Вы знаете, к чему это идет, верно?

     DIV > h4 + * {цвет: серый;}
     

    Мы можем изменить и это. Мы можем захотеть применить стили к любому элементу, который является потомком DIV с классом , кроме , который следует сразу за таблицей. Кроме того, любые гиперссылки, найденные в таких DIV должен быть темно-серым и подчеркнутым. Таким образом:

     TABLE + DIV.aside * {color: grey;}
    TABLE + DIV.aside A: ссылка {color: #444; украшение текста: подчеркивание;}
     

    Если вы все еще немного не уверены в том, как они работают, попробуйте взять свой собственный документ средней сложности и попытаться создать селекторы, которые будут точно обращаться к данному элементу, используя все различные селекторы CSS2, которые мы здесь использовали. Небольшая практика поможет освоиться с этими селекторами. (Сведения о том, какие браузеры помогут вам в этом, см. в разделе «Поддержка браузеров» в конце статьи.)

    Интересное применение

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

    Обычный печатный эффект заключается в том, что первый абзац статьи выделяется курсивом, полужирным шрифтом или, во всяком случае, крупнее, что каким-то образом отличается от остальной части статьи. Если предположить, что заголовок статьи представляет собой элемент h2 , то все, что нам нужно, это что-то вроде этого:

     h2 + P {начертание: курсив; размер шрифта: 150%;}
     

    Далее предполагается, что никакие другие элементы h2 не встречаются в статье, а если и встречаются, то за ними не следует абзац. Если вы уже классифицируете h2 , чтобы пометить его как заголовок статьи, вы можете обратить это в свою пользу:

     h2. title + P {font-style: italic; размер шрифта: 150%;}
     

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

     LI + LI {цвет: серый; размер шрифта: 90%;}
     

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

    Как насчет сокращения расстояния между заголовками и следующими элементами? Авторы всегда пытаются сделать это с помощью классов и других приемов, но с селектором смежных элементов это становится очень просто. Попробуйте это в браузере с поддержкой CSS2:

     h2, h3, h4 {margin-bottom: 0.125em;}
    h2 + *, h3 + *, h4 + * {верхнее поле: 0,125em;}
     

    Та-да! Обычный размер поля между заголовками и всем, что за ними следует, сведен до одной восьмой em. Вы, конечно, можете варьировать эту сумму по своему усмотрению. Это может быть адаптировано любым количеством способов: вы можете приблизить списки к абзацам, используя P + UL , увеличить разделение между таблицами, которые непосредственно следуют друг за другом, и многими другими вещами.

    Поддержка браузера

    Селекторы соседних элементов поддерживаются в Internet Explorer 5.x Macintosh. Они также поддерживаются в предварительной версии Netscape 6 1 для всех бесчисленных платформ, для которых она доступна, и в предварительной версии 3 Opera 4 для Windows. Существуют ошибки в обработке селекторов соседних элементов в IE5 для Windows и Opera 3 для Windows.

    Все еще впереди

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

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

    Комбинаторы CSS — Темы масштабирования

    Обзор

    Комбинатор CSS — это тип селектора в CSS, который используется для указания отношения ровно между двумя селекторами CSS. По сути, объединяет два селектора CSS для уникальной идентификации элемента в документе. В CSS существует четыре различных типа комбинаторов, а именно: Общий родственный селектор (~) , Смежный одноуровневый селектор (+) , Дочерний селектор (>) и Селектор потомков (пробел) . Каждый из этих селекторов определяет уникальное отношение между двумя селекторами, что помогает указать связь и расположение контента в документе.

    Scope

    • В этой статье мы узнаем о комбинаторах CSS, их типах и использовании.
    • Однако в этой статье не рассматриваются селекторы в CSS, а также общие правила и синтаксис CSS.

    Что такое комбинатор CSS?

    Начнем с примера. Скажем, вы хотите найти направление к месту под названием «Ганди Чоук», и вы вводите то же самое на своей карте. К небольшому удивлению, вы найдете множество мест под названием «Ганди Чоук» по всей Индии. Со второй попытки вы также указываете название города в строке поиска, скажите «Ганди Чоук, Дели», это помогает сузить поиск и позволяет выбрать точное место, куда вы хотите отправиться.

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

    Комбинатор CSS — это тип селектора в CSS, который используется для определения отношения между любыми двумя селекторами CSS . Это помогает однозначно идентифицировать и выбирать только те элементы в документе, которые удовлетворяют указанной взаимосвязи . Комбинатор CSS следует следующему синтаксису:

     
     selector(combinator)selector {
        стили;
    }
     

    Таким образом, комбинатор объединяет два селектора в один селектор. Этот комбинированный селектор называется сложный селектор .

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

    • Общий родственный селектор (~)
    • Селектор соседнего брата (+)
    • Детский селектор(>)
    • Селектор потомков (пробел)

    Примечание

    • Комбинаторы CSS задают взаимосвязь между селекторами для выбора только тех элементов, которые удовлетворяют взаимосвязи
    • Существует четыре типа комбинаторов CSS

    Типы комбинаторов CSS

    Общий селектор родственных элементов (~)

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

    Общий родственный селектор представлен с помощью тильда (~) знак между двумя селекторами. Первый селектор представляет элемент, после которого должен быть выбран любой элемент, представленный вторым селектором .

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

    Возьмем веб-страницу, на которой есть ряд элементов, вложенных друг в друга. HTML для веб-страницы указан ниже.

    HTML:

     
     <тело>
    <дел>
        

    дочерний абзац перед заголовком

    Заголовок1

    дочерний абзац после заголовка

    <дел>

    внучатый абзац

    дочерний абзац

    абзац вне блока

    Приведенная выше блок-схема описывает иерархию элементов в HTML. Допустим, мы хотим выбрать только те элементы

    (выделены зеленым цветом), которые являются одноуровневыми элементами

    (выделены синим цветом) и появляются после него.

    Для этого мы можем использовать общий родственный селектор h2 ~ p. В этом примере любой

    , который имеет того же родителя, что и

    , и появляется после его выбора.

    CSS:

     
     h2 ~ p {
    цвет: зеленый;
    }
     

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

    , а также абзацы, которые не являются одноуровневыми элементами

    , не стилизуются.

    Селектор соседнего элемента (+)

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

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

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

    Возьмем предыдущий HTML :

     
     
    <дел>
        

    дочерний абзац перед заголовком

    Заголовок1

    дочерний абзац после заголовка

    <дел>

    внучатый абзац

    дочерний абзац

    абзац вне блока

    Блок-схема выше описывает иерархию элементов в HTML. Как мы видим, мы хотим выбрать только те элементы

    (выделены зеленым цветом), которые следуют сразу за элементом

    (выделены синим цветом).

    Для этого мы используем селектор непосредственного родственного элемента как h2+p.

    CSS:

     
     h2 + p {
    цвет: зеленый;
    }
     

    Из приведенного выше кода мы получаем следующий вывод. Как мы видим, стилизуется только первый родственный

    после

    , а все остальные

    не выбираются. Обратите внимание, что если в любом другом месте документа была другая пара

    и

    с тем же родителем, то этот

    также будет выбран.

    Селектор нисходящей линии (пробел)

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

    Потомок представлен с помощью пустое пространство между двумя селекторами. Выбирается любой элемент, представленный вторым селектором, который вложен на любом уровне под первым селектором .

    Ниже приведен фрагмент HTML веб-страницы с элементами, вложенными друг в друга.

    HTML:

     
     <тело>
    <дел>
        

    Дочерний абзац блока div

    Дочерний диапазон div

    Внучатый абзац div <диапазон>

    Внучатый абзац div

    Еще один дочерний абзац div

    Абзац вне div

    Приведенная выше блок-схема описывает отношения и иерархию различных элементов в HTML. Скажем, мы хотим выбрать каждый элемент

    (выделен зеленым цветом), который вложен в элемент

    на любом уровне. Используя селектор потомков div p, мы можем выбрать каждый

    внутри

    , даже те, которые вложены в дочерние элементы
    .

    CSS:

     
     раздел п {
    цвет: зеленый;
    }
     

    Приведенный выше код выводит следующий результат. Как мы видим, выбираются все абзацы под

    , даже те, которые вложены в диапазон. Не выделяется только тот абзац, который не является потомком div.

    Дочерний селектор (>)

    Дочерний селектор в CSS используется для выбора элементов на веб-странице, которые являются прямыми дочерними элементами указанного элемента. Другими словами, он выбирает только те элементы, которые вложены непосредственно в указанный элемент, а не те, которые вложены в дочерние или внучатые элементы элемента.

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

    Рассмотрим тот же фрагмент HTML, что и в предыдущем примере.

    HTML:

     
     <тело>
    <дел>
        

    Дочерний абзац блока div

    Дочерний диапазон div

    Внучатый абзац div <диапазон>

    Внучатый абзац div

    Еще один дочерний абзац div

    Абзац вне div

    Приведенная выше блок-схема описывает иерархию элементов в HTML-документе. Если мы хотим выбрать все элементы

    (выделены зеленым цветом), которые являются прямыми дочерними элементами

    (выделены синим цветом), мы можем использовать селектор дочерних элементов div > p.

    CSS:

     
     div>p {
    цвет: зеленый;
    }
     

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

    Примечание

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

    Как использовать комбинаторы CSS?

    Комбинаторы CSS можно использовать различными способами и в сочетании с различными типами селекторов для специального выбора и оформления элементов.

    В качестве примера предположим, что мы хотим стилизовать кнопку, которая является прямым дочерним элементом элемента div с классом 'box'. Это можно сделать, указав имя класса или идентификатор для этого элемента кнопки, чтобы настроить его. Однако такая практика может привести к избыточности данных и увеличению сложности кода. Если мы указываем классы или, в некоторых случаях, несколько классов для каждого элемента, это также усугубляет проблему раздувания кода в коде разметки.

    Альтернативой этому подходу является использование комбинатора. Мы можем просто использовать сложный селектор .box > button с дочерним селектором-комбинатором. В этом примере селектор выбирает только кнопку, которая является дочерним элементом поля класса. Он не выбирает никаких других дочерних элементов класса, которые не являются кнопками. Он также не выбирает никакую другую кнопку, которая не является прямым дочерним элементом поля класса. Таким образом, он нацелен на элемент кнопки без дополнительной сложности в коде разметки.

    Знание комбинаторов является важным инструментом в оформлении веб-страниц.

    Все селекторы комбинаторов CSS

    Комбинатор Пример Описание
    Общий селектор сестра Div ~ P Выборы каждый

    Div whise Ahgiving Ahgiving

    Div whise Ahgiving Ahgiving

    Div ~ P

    . Селектор смежных братьев и сестер div + pВыбирает каждый

    , который следует непосредственно за

    и является дочерним элементом того же родителя
    Селектор потомков div p Выбирает каждый

    внутри

    Селектор дочерних элементов000 div > p Выбирает каждый элемент

    , являющийся прямым потомком элемента

    Заключение

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

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

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