Для начала давайте разберемся, что такое родительский элемент и дочерний, например, имеем такую HTML структуру:
В этой структуре самым главным родительским элементом будет <div>, его дочерними элементами будут <p> и еще глубже <u>. Так же элемент <p> будет дочерним для <div>, но родительским для <u>, так как последний заключен в тэге <p>. Для тэга <u> родительскими будут и <div> и <p>, причем по приоритетам стилей сначала будет идти самый ближний по родству, т.е. <p> тэг.
Как правило наследуются не все свойства, например, могут наследоваться такие свойства, как цвета шрифта, размер шрифта и т.д. А не наследуются, например, ширина блока, отступы и т.д.
В примере описанном выше, если тэгу <div> размер шрифта задан 12px, а тэгу <p> - 14px, тогда тэг <u> будет наследовать размер в 14px, от ближнего родственника.
При написании селектора, которому мы хотим задать свойство наследование хорошо помагает, так как CSS его учитывает, просто нужно поочередно указывать тэги через пробел до нужного, при определении.
Допустим у нас есть HTML-структура:
Задать стиль для <p> можно следующим образом
или так
Оба этих варианта для данной структуры сделаю абсолютно одно и тоже - окрасят текст в красный цвет. Но вы заметили, что перед p, во втором случае появилось div. Это называется вложенные селекторы, они позволяют отделять стили друг от друга. Все в родительских и дочерних элементах. Вот эта запись:
Будет применять стиль ко всем <p> тэгам, у которых в родителях есть <div>. А тем, у которых такого родителя нету, стиль применятся не будет.
Отсюда вытекает еще одна особенность наследования. Допустим, у нас есть такая структура HTML:
Тогда стиль
Применится ко всем этим тэгам <span>, чтобы для внутреннего тэга <span> указать свой стиль нужно дописать такое:
Вот как это будет выглядеть:
Т.е. тут четко прослеживается наследование и использование этого в CSS.
Еще одна занимательная особенность - сгруппированные селекторы. Допустим, мы хотим задать красный цвет всем <p> тэгам и всем <a> тэгам, тогда нам нужно написать так:
Благодаря возможности группировать селекторы этот код можно значительно упростить:
Результат не изменился, изменилась только структура CSS-кода. Сгруппированный селектор состоит из обычных селекторов, разделенных запятыми. В том числе под обычным селектором понимаются вложенные селекторы, тэги с классами и идентификаторами. Такая запись будет вполне допустимой:
Тест
- Для структуры ниже выберите неправильное утверждение:
- Тэг <span> дочерний по отношению к тэгам <li> и <ul>
- Тэг <li> родительский по отношению к <span>
- Тэг <ul> дочерний по отношению к <span>
- Тэг <li> дочерний по отношению к <ul>
- Выберите правильный полный селектор для тэга <s>, учитывая наследование
- p span s
- div p s
- div p span s
- span s
1. - c
2. - b