Селекторы атрибутов

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

Простой селектор атрибута
Задаёт стиль элемента, при заданном специфичном атрибуте.
Применяется следующий синтаксис такого селектора:
[атрибут] { Описание его стиля } Селектор[атрибут] { Описание его стиля }
Не допускаются пробелы между именем селектора и квадратными скобками.
Рассмотрим применение простого селектора на примере:
<html>
<head>

<title>Простые селекторы атрибутов</title>

<style type="text/css">
P {
color: green;
}
P[align]  {
color: red;
}
</style>
</head>

<body>

<p>Зеленый цвет текста для всех параграфов</p>

<p align="right">При наличии параметра «align» текст становится красным</p>

</body>
</html>

Простой селектор атрибутов

Из текстов на рисунке наглядно видно действие простого селектора атрибутов.

Селектор атрибута со значением
Селектор атрибута со значением применяют, когда необходимо задать стили веб-элементу с атрибутами строго определённого значения.
Как и всегда — рассмотрим всё на примере:

<html>
<head>

<title>Селекторы атрибутов со значением</title>

<style type="text/css">
P {
color: green;
}
P[align="right"]  {
color: red;
}
</style>
</head>

<body>

<p>Зеленый цвет текста для всех параграфов</p>
<p align="center">Текст, расположенный по центру, цвет не меняет</p>
<p align="right">При наличии параметра «align» со значением «right» текст становится красным</p>

</body>
</html>

Атрибуты со значением

И снова — надписи на рисунке объясняют действие селекторов атрибута со значением.
Существуют ещё 3 способа применения селекторов атрибутов:

  • Атрибут начинается с определенного значения
  • Атрибут оканчивается определенным значением
  • Значение встречается в любом месте атрибута

Рассматривать мы их сейчас не будем, т.к. они применяются редко и лишь для специфических случаев.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha