CSS. Каскадные таблицы стилей. Подробное руководство.Символ-Плюс 2008

Рис. 2.7. Применение селектора класса

В сочетании с показанным ранее примером разметки применение этого простого правила приводит к результату» показанному на рис. 2.7. Другими словами, стиль font-weight:bold будет применен ко всем элементам (благодаря наличию универсального селектора), атрибут class которых имеет значение warning*

Как видите» селектор класса напрямую ссылается на значение, которое будет найдено в атрибуте class элемента. Перед этой ссылкой всё-гда ставится точка (.), которая отмечает ее как селектор класса. Точка помогает отделить селектор класса от всего, с чем он может быть объединен, например от селектора элемента. Скажем» вам захотелось выделять полужирным шрифтом текст только в том случае, еслн предупреждением является весь абзац:

p.warning {font-weight:bold;}

Теперь селектор выбирает только элементы р, у которых значение атрибута class равно warning, и игнорирует все другие элементы независимо от их класса. Селектор p. warning расшифровывается так:«Любой абзац» у которого значение атрибута class равно warning** Поскольку элемент span не является абзацем, селектор правила ему не соответствует, и текст не будет выделен полужирным шрифтом.

Если бы вы действительно захотели назначить элементу span другие стили, вы могли бы использовать селектор span, warning:

p.warning {font-weight:bold;} span.warning {font-style:italic;}

В этом случае абзац с предупреждением выделяется полужирным шрифтом, тогда как предупреждения-фрагменты выделяются курсивом. Каждое правило применяется только к определенному типу сочетания элемент/класс, и поэтому не распространяется на другие элементы.