Комбинаторы CSS

Комбинаторы CSS

Комбинатор - это某种 механизм, который объясняет отношения между селекторами.

Выборщик CSS может содержать несколько простых селекторов. Между простыми селекторами мы можем включать комбинатор.

В CSS есть四种 различных комбинаторов:

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

Селектор потомка

Селектор потомка соответствует всем элементам, являющимся потомками указанного элемента.

Ниже приведен пример, который выбирает все элементы <p> внутри элемента <div>:

Пример

div p {
  background-color: yellow;
}

Попробуйте сами

Селектор подэлемента

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

Ниже приведен пример, который выбирает все элементы <p>, являющиеся подэлементами элемента <div>:

Пример

div > p {
  background-color: yellow;
}

Попробуйте сами

Братский селектор

Братский селектор соответствует всем相邻ным однородным элементам, являющимся相邻ными элементами указанного элемента.

Братские (однородные) элементы должны иметь одинаковый родительский элемент, "相邻ный" означает "следующий за ним".

Ниже приведен пример, который выбирает все элементы <p>, которые следуют за элементом <div>:

Пример

div + p {
  background-color: yellow;
}

Попробуйте сами

Общий братский селектор

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

Ниже приведен пример, который выбирает все элементы <p>, являющиеся однородными элементами элемента <div>:

Пример

div ~ p {
  background-color: yellow;
}

Попробуйте сами

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

Выборщик Пример Пример описания
element element div p Выберите все элементы <p> внутри элемента <div>.
element>element div > p Выберите все элементы <p>, у которых родительский элемент является элементом <div>.
element+element div + p Выберите все элементы <p>, которые следуют сразу за элементом <div>.
element1~element2 p ~ ul Выберите каждый <ul> элемент, у которого перед ним есть элемент <p>.

Дополнительное чтение

Дополнительная литература:Выборщик CSS потомков

Дополнительная литература:Выборщик CSS детей

Дополнительная литература:Выборщик CSS соседних братьев