Latest web development tutorials
×

CSS курс

CSS курс CSS Краткое введение CSS грамматика CSS Id и Class селектор CSS создать CSS фон(background) CSS текст(text) CSS шрифты(Fonts) CSS ссылка(link) CSS стили списка(ul) CSS таблица(table) CSS Box модель CSS рамка(border) CSS контур(outline) CSS маржа(margin) CSS начинка(padding) CSS Группировка и вложенность CSS размер(Dimension) CSS дисплей(display) CSS разместить(position) CSS терка(float) CSS выравнивать(align) CSS Сочетание селекторов CSS Псевдо-классы CSS Псевдо-элемент CSS Панель навигации CSS Выпадающее меню CSS Галерея изображений CSS Прозрачное изображение/непрозрачный CSS технологии мозаики изображения CSS Тип носителя CSS селекторы атрибутов CSS резюме CSS примеров

CSS3 курс

CSS3 курс CSS3 Краткое введение CSS3 рамка(border) CSS3 фон CSS3 постепенное изменение CSS3 Текстовые эффекты CSS3 шрифты CSS3 2D изменение CSS3 3D изменение CSS3 переход CSS3 анимация CSS3 Multi-колонки CSS3 Пользовательский интерфейс

CSS Адаптивный дизайн

Viewport Grid View Медиа-запросы изображение видео(video) рамка

CSS справочное руководство

CSS справочное руководство CSS селектор CSS Речь Ссылка CSS Web Безопасные шрифты CSS анимация CSS блок CSS цвет CSS значения цвета CSS название цвета CSS шестнадцатеричный цвет

Сочетание CSS селекторов

Сочетание CSS селекторов

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

CSS селекторы включают в себя сочетание различных комбинаций простых селекторов.

В CSS3 содержит четыре комбинации:

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

Потомство Выбор

Потомок селектор соответствует всем элементам, достойные элементы потомков.

Следующий пример выбирает элемент все <p> в элемент <div>:

примеров

div p
{
background-color:yellow;
}

Попробуйте »


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

По сравнению с селекторов потомков, суб-селекторы (селекторы дочерних элементов) можно выбрать элемент как дочерний элемент элемента.

Следующие примеры выбраны элемент <div> во всех прямых элементов дочерних <р>:

примеров

div>p
{
background-color:yellow;
}

Попробуйте »


Прилегающие Sibling Selector

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

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

Следующий пример выбирает все первый в элементе <div> после элемента <p>:

примеров

div+p
{
background-color:yellow;
}

Попробуйте »


Обычные соседние селекторы одноуровневых

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

В следующем примере выбираются все элементы <div> всех смежных собрата <p>:

примеров

div~p
{
background-color:yellow;
}

Попробуйте »