2015-01-30
343
Для задания разным тегам документа одних и тех же свойств в CSS используется группировка. Селекторы, то есть теги, можно сгруппировать в список, разделив запятыми.
В следующем примере разным тегам задается одно свойство:
Hi { color: red } Н2 { color: red } НЗ { color: red }
Этот пример можно значительно упростить, используя правило группировки:
HI, H2, НЗ { color: red }
Как отмечалось выше, при группировке селекторы разделяются запятыми. Селекторы потомков
Иногда необходимо задать свойства тегу, который располагается внутри другого тега, то есть является так называемым потомком. Селектор потомков состоит из двух и более селекторов, разделенных пробелом.
Предположим, HTML-документ имеет следующий код:
<Н1>0чень <ЕМ>важный</ЕМ> заголовок</Н1>
Теперь допустим, что вы хотите изменить свойства тега <Н1> и текста «важный». Если вы будете использовать CSS-код, приведений ниже, то повлияете на все теги <ЕМ> на странице (а этого вам не нужно):
H1 { color: red }
ЕМ { color: blue }
Чтобы повлиять на свойства текста «важный», который находится внутри тега <ЕМ>, а тот, в свою очередь, внутри тега <Н1>, нужно использовать следующий CSS-код:
|
|
|
H1 EM { color: blue }
Обратите внимание, что, в отличие от группировки, при обращении к потомкам запятые не ставятся. Количество тегов, которые можно записать потомками, неограниченно, например:
BODY DIV P SPAN { color: green }
Если в вашем документе есть тег <SPAN>, который находится внутри тега <р> который, в свою очередь, находится внутри тега <DIV>, то текст в данном теге будет зеленым. В столь длинных описаниях тег <BODY> можно опускать, так как
все теги и так находятся внутри тега <BODY>.
Если при разработке таблицы стилей вы еще точно не знаете, какой тег будет размещаться внутри какого, то можете воспользоваться знаком звездочки. Учтите, что с обеих сторон звездочки обязательно должны находиться пробелы.
Пример, представленный выше, можно перезаписать так:
BODY * SPAN { color: green }
Однако помните, что текст будет зеленым, даже если тег <SPAN> просто находится
внутри тега <DIV>. Другими словами, звездочкой считается любой набор селекто
ров и их потомков. ~~
Сестринские селекторы
Сестринскими тегами называются теги, которые следуют друг за другом. Предположим, у вас есть абзац, который имеет атрибут class со значением first. Если за ним следует еще какой-то абзац, то размер вертикального пространства между| ними можно уменьшить, используя такой код:
P.first + P {margin-top: -5mm }
