В CSS применяется механизм наследования стилей. Этот механизм предполагает, что вложенные элементы могут наследовать стили своих элементов-контейнеров.
При нескольких уровнях вложенности элементы наследуют стили только ближайшего контейнера.
Однако не ко всем свойствам CSS применяется наследование стилей. Например, свойства, которые представляют отступы (margin, padding) и границы (border) элементов, не наследуются.
Кроме того, браузеры по умолчанию также применяют ряд предустановленных стилей к элементам. Например, заголовки имеют определенную высоту и т.д.
Для применения стиля к вложенному элементу селектор должен содержать вначале родительский элемент и затем вложенный:
#main p{
font-size: 16px;
}
Дочерние - это элементы первого уровня вложения.
Для обращения к дочерним элементам используется знак
угловой скобки:
.article > p{
color: red;
}
Иногда такие элементы еще называют сиблинги (siblings)
h2+div {
color:red;
}
здесь знак + установит значение для div непосредственно идущего после заголовка h2 на том же уровне вложения.
Текст первого блока примет стиль
last text
Текст второго блока
last text
p~div {
color: blue;
}
тильда установит значение для всех div
на одном уровне с параграфом p.
Параграф ~ сестринские блоки last text Текст первого блока примет стиль last text Текст второго блока как и все примет стиль last text