Главная » CSS » Контекстные селекторы

Контекстные селекторы

При создании веб-страницы часто приходится вкладывать одни теги в другие. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, можно определить стиль для жирного текста, только когда он еще и курсивный.

Обычное использование селекторов.

B { font-family: Arial; font-weight: bold; color: navy; }
I { font-style: italic; }

Контекстный селектор состоит из простых селекторов разделенных пробелом.

B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }

В примере жирный курсивный шрифт Arial синего цвета будет применен к тегу I, когда он находится внутри тега B.

Пример. Контекстные селекторы
<html>
<head>
<style type="text/css">
B { font-weight: bold; }
I { font-style: italic; }
B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }
</style>
</head>

<body>
<b>Жирный шрифт</b><br>
<i>Курсивный текст</i><br>
<b><i>Жирный курсивный текст</i></b><br>
<i><b>Курсивный и жирный текст</b></i>

</body>
</html>

 

Жирный шрифт
Курсивный текст
Жирный курсивный текст
Курсивный и жирный текст

Можно одновременно использовать сгруппированные и контекстные селекторы.

B I, H1, P .cite { color: navy; }

В примере синий цвет будет применен:
- к тегу курсива I размещенному внутри тега B;
- ко всем тегам H1;
- к классу cite находящемуся внутри тега параграфа P.



Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка