Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



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



CSS Комбинатор

Комбинатор - это то, что объясняет взаимосвязь между селекторами.

Селектор CSS может содержать более одного селектора. Между селекторами, можно включить комбинатор.

Есть четыре различных комбинатора в CSS3:

  • селектор потомок (пробел)
  • селектор дочерний (>)
  • селектор смежных компонентов (+)
  • общий селектор родственных элементов (~)

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

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

Следующий пример выбирает все элементы <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;
}
Попробуйте сами »

Практика: комбинатор

Упражнение: комбинатор p

Измените цвет всех элементов <p>, которые являются потомками элементов <div>, на "красный".

<style>
 {
  color: red;
}
</style>

<body>

<div>
  <p>Это параграф.</p>
  <p>Это параграф.</p>
</div>
<p>Это параграф.</p>
<p>Это параграф.</p>

</body>



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

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

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.