Вход/Регистрация
HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
вернуться

Дронов Владимир

Шрифт:

Может. Специальные селекторы.

Специальный селектор — это селектор, неявно привязывающий стиль к элементу Web-страницы согласно более сложному, чем имя тега, критерию. Таким критерием может быть, например, порядковый номер элемента в родительском элементе, указание на определенную часть содержимого абзаца (первую строку или первую букву), состояние гиперссылки (посещена она или нет) и пр. Обычно специальные селекторы используют в комбинированных стилях, чтобы сделать их более конкретными.

Существует несколько разновидностей специальных селекторов, которые сейчас и рассмотрим.

Комбинаторы

Комбинаторы — разновидность специальных селекторов, привязывающая стиль к элементу Web-страницы на основании его местоположения относительно других элементов.

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

<элемент 1> + <элемент 2> { <стиль> }

Стиль будет привязан к элементу 2, который должен непосредственно следовать за элементом 1.

Листинг 13.1

H6 + PRE { font-size: smaller }

.

<H6>Это заголовок</H6>

<PRE>Этот текст будет набран уменьшенным шрифтом.</PRE>

А этот — обычным шрифтом.

<H6>Это заголовок</H6>

И этот — обычным шрифтом.

<PRE>И этот — обычным шрифтом.</PRE>

Стиль, описанный в листинге 13.1, будет применен только к первому тексту фиксированного форматирования, т. к. он непосредственно следует за заголовком шестого уровня.

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

<элемент 1> ~ <элемент 2> { <стиль> }

Стиль будет привязан к элементу 2, который должен следовать за элементом 1. При этом элемент 2 может быть отделен от элемента 1 другими элементами.

Листинг 13.2

H6 + PRE { font-size: smaller }

.

<H6>Это заголовок</H6>

<PRE>Этот текст будет набран уменьшенным шрифтом.</PRE>

А этот — обычным шрифтом.

<H6>Это заголовок</H6>

И этот — обычным шрифтом.

<PRE>А этот — уменьшенным шрифтом.</PRE>

Стиль из листинга 13.2 будет применен к обоим текстам фиксированного формата: и тому, что непосредственно следует за заголовком шестого уровня, и тому, который отделен от заголовка абзацем.

Комбинатор > позволяет привязать стиль к элементу Web-страницы, непосредственно вложенному в другой элемент:

<элемент 1> > <элемент 2> { <стиль> }

Стиль будет привязан к элементу 2, который непосредственно вложен в элемент 1.

Листинг 13.3

BLOCKQUOTE + P { font-style: italic }

.

<BLOCKQUOTE>

Этот абзац будет набран курсивом.

<DIV>

А этот абзац — обычным шрифтом.

</DIV>

</BLOCKQUOTE>

Стиль из листинга 13.3 будет применен только к абзацу, непосредственно вложенному в большую цитату. На второй абзац, последовательно вложенный в большую цитату и блочный контейнер, этот стиль действовать не будет.

Комбинатор <пробел> позволяет привязать стиль к элементу Web-страницы, вложенному в другой элемент, причем не обязательно непосредственно:

<элемент 1> <элемент 2> { <стиль> }

Стиль будет привязан к элементу 2, который так или иначе вложен в элемент 1. При этом элемент 2 может быть вложен в другой элемент, вложенный в элемент 1, или даже в несколько таких элементов последовательно.

Листинг 13.4

BLOCKQUOTE P { font-style: italic }

.

<BLOCKQUOTE>

Этот абзац будет набран курсивом.

<DIV>

Этот абзац — тоже.

</DIV>

</BLOCKQUOTE>

  • Читать дальше
  • 1
  • ...
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: