Теперь, наконец, рыночная доля IE6 настолько мала, что разработчики могут объявить его поддержку необязательной. Так что пришло время возродить CSS селекторы, которые вы никогда не должны были использовать только потому, что IE6 их не понимал.
Ниже приводится краткое описание некоторых из наиболее полезных "забытых" CSS 2.1 селекторов.
Дочерние селекторы
Дочерние селекторы - это непосредственные потомки элемента, на них указывает знак больше: ">". Это правило будет работать для всех элементов strong, которые являются непосредственными потомками элемента p:
p > strong {color:#a00;}
Смежные селекторы (сестринские)
Смежные селекторы обозначены знаком плюс: "+". Смежные элементы расположены на одном уровне друг с другом и имеют одного родителя. Следующее правило означает распространяется на абзац - р, который непосредственно следует за элементом ul и имеет с ним общего родителя: ul + р {color: # a00;}
Селекторы атрибутов
Селекторы атрибутов, как показывает название, позволяют выбирать элементы на основании их атрибутов и значений этих атрибутов. Существует четыре типа селекторов атрибутов, но два из них наиболее полезны.
[att]
Простой выбор атрибутов – применяется для выбора элемента, который имеет атрибут att, независимо от его значения. Следующее правило распространяется на все элементы, которые имеют атрибут title, независимо от его значения:
a[title] {color:#a00;}
[att = val]
Выбор на основании конкретного значения атрибута – для выбора элементов, которые имеют атрибут att со значением "val". В следующем примере селектор выбирает все элементы input, которые имеют атрибут со значением «text»:
input[type=text] {color:#a00;}
Псевдокласс :first-child
Псевдокласс :first-child применяется для выбора элементов, являющихся первыми дочерними элементами других элементов. Следующее правило относится к первому элементу li - каждого упорядоченного списка в документе:
ol li:first-child {color:#a00;}
Динамические псевдоклассы :hover и :focus
Большинство веб-разработчиков знают и используют динамический псевдокласс :hover для управления поведением ссылки, когда над ней размещен курсор мыши.
Однако, вы можете использовать этот псевдокласс для стиля любого элемента, а не только для ссылки ссылки. Таким образом, в некоторых ситуациях можно создать полезные визуальные сигналы.
Следующее правило изменит цвет фона строк таблицы, когда пользователь будет наводить на них курсор:
tr:hover {background:#eee;}
Здесь есть один очень важный момент. Имейте в виду, что правила для псевдокласса :hover будут видны только пользователям, которые используют мышь, поэтому используйте его только для некритичных вещей.
Динамический псевдокласс :focus применяется для любых элементов, которым в настоящий момент принадлежит фокус ввода (например, ссылки и формы управления имеют фокус ввода). Следующие правила будут применяться к элементу textarea, который имеет фокус ввода с клавиатуры:
textarea:focus { color:#000; background:#ffc; }
Примечание: :focus не работает в IE 7.
Множественные классы
Вы можете присвоить несколько классов одному элементу, и вы можете написать селекторы, которые предназначены только для элементов, которые имеют несколько классов. Следующее правило будет соответствовать элементам р, которые имеют среди имен классов как “info”, так и “error”:
p.info.error { color:#900; font-weight:bold; }
Чистая разметка через прогрессивное улучшение
Все эти селекторы помогают веб-разработчикам сделать код HTML чище, так как можно опустить много имен классов, а в некоторых случаях избежать использования JavaScript.
Я не говорю, что вы должны отказаться от поддержки IE 6, но не случится ничего страшного, если некоторые вещи не будут выглядеть безупречно в веб-браузере, которому уже десять лет.
Комментариев нет:
Отправить комментарий