Пример 10.5. Применение сложных селекторов
Сложные селекторыСписок, оформленный обычным шрифтом
- Элемент списка
- Элемент списка
Список, оформленным курсивным шрифтом
- Элемент списка
- Элемент списка
Раскрашенный список
- Элемент списка
- Элемент списка
Чтобы применить стиль к каждому отдельному элементу списков, не потребовалось назначать никакие стилевые классы для самих элементов списков. Потребовалось лишь отнести сами списки (элементы OL) к нужным стилевым классам, что избавило нас от лишних усилий при составлении HTML‑документа.
Обратите внимание на таблицу стилей из приведенного примера 10.5, а именно на селекторы. Как видите, если нужно указать, что данный стиль должен применяться только к элементам, находящимся внутри другого элемента, контекстный селектор будет состоять из соответствующих простых селекторов, разделенных пробелом.
Кроме того, что показано в примере, можно создать и другие виды контекстных селекторов, например:
P STRONG {color: red} /*применяется к элементам STRONG внутри P*/
.par .colored {color: red} /*применяется к элементам со стилевым классом
"colored", находящимся внутри элементов со стилевым классом "par"*/
Комментарии в таблице стилей
Примечательно, что даже в таблицы стилей можно помещать комментарии. Естественно, это весьма полезно при определении больших и сложных таблиц. При этом синтаксис комментария CSS отличается от синтаксиса комментария HTML. Комментарий в CSS задается в стиле языков программирования C или Java, то есть так:
/* Это однострочный комментарий */
/* А здесь записан
многострочный
комментарий */
