Селекторы атрибутов
Оригинал: Attribute selectors
Что такое атрибуты:
У всех html элементов есть свойства, которые называются атрибутами. У этих атрибутов есть значения.
В теге элемента может быть использовано любое количество атрибутов, разделенных пробелом.
В приведенном ниже примере показаны примеры атрибутов для html элементов:
<h1 id="section1">
<img src ="mainimage" title ="main image">
<img title ="small.gif" width ="100" height ="100">
<a href ="foo.htm">
<p class ="maintext">
<form style ="padding: 10px">
Селекторы атрибутов
Селекторы атрибутов используются для выбора элементов на основе их атрибутов.
Например, вы можете выбрать любое изображение на html странице, которое называется, к примеру, "small.gif". И все правила описанные в css
будут работать только для изображений с именем "small.gif".
img [src="/small.gif"] {
border:1px solid #000;
}
Существует 4 типа селекторов атрибутов :
Первый заключается в выборе атрибута селектора. В примере ниже будут выбраны селекторы атрибутов (в данном случае "img"):
img [title] {
border:1px solid #000;
}
img [width] {
border:1px solid #000;
}
img [alt] {
border:1px solid #000;
}
Второй тип заключается в выборе свойства селектора
img [src="/small.gif"] {
border:1px solid #000;
}
Третий тип заключается в выборе на основании определенного значения свойства. В приведенном ниже примере правило будет действовать для изображений у которых атрибут alt="small".
img [alt~="small"] {
border:1px solid #000;
}
Четвертый тип заключается в выборе на основании того, есть ли в значении артибуте дефис "-"
img [title|="small"] {
border:1px solid #000;
}
К сожалению, селекторы атрибутов не поддерживаются браузерами IE5, IE5.5, IE6.
Добавить комментарий
