CSS по шагам

       

Вид элемента в зависимости от его параметра


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style type="text/css">

Q {

font-style: italic; /* Курсивное начертание */

quotes: "\00AB" "\00BB" /* Меняем вид кавычек в цитате */

}

Q[title] {

color: maroon /* Цвет текста */

}

</style>

</head>

<body>

<p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: <q title="Из законов Фергюсона-Мержевича">После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом</q>.</p>

</body>

</html>

Q {font-style: italic;quotes: "\00AB" "\00BB"} Q[title] {color: maroon}

Результат примера показан ниже.

Продолжая известный закон Мерфи, который гласит: Если неприятность может случиться, то она обязательно случится, можем ввести свое наблюдение: После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом.

В данном примере меняется цвет текста внутри контейнера <Q>, когда к нему добавляется параметр title. Обратите внимание, что для селектора Q[title] нет нужды повторять атрибуты, поскольку они наследуются от селектора Q.



Содержание раздела