Взгляд в CSS3 Структурный селектор первого типа
Одна вещь, которая мне нравится в CSS3, - это новое добавление селекторов, которые позволяют нам нацеливать элементы конкретно, не полагаясь на учебный класс, Я бы или другой атрибут элемента, и тот, который мы рассмотрим здесь, является следующим селектором, : Во-первых, из-типа.
: Во-первых, из-типа селектор будет нацелен на первого потомка указанного элемента, например, фрагмент ниже будет нацелен на первый h2 на веб-странице.
h2: объявление первого типа / * объявление стиля * /
: Во-первых, из-типа также равно : П-го из-типа (1), так что вместо выбора только первый типа, мы можем дополнительно выбрать второй, третий и так далее. Следующий фрагмент будет нацелен на второй h2 элемент на веб-странице.
h2: nth-of-type (2) / * объявление стиля * /
: Во-первых, из-типа” против. “:Первый ребенок”
Может показаться, что эти два селектора делают одно и то же, но это не так. Давайте посмотрим на следующую демонстрацию:
Допустим, у нас есть пять элементов абзаца, обернутых в ДИВ, как это:
График 1
Прагмент 2
ПРАГ 3
ПРАГ 4
Прагмент 5
Теперь мы хотели бы выбрать первый абзац, используя :Первый ребенок селектор.
p: first-child padding: 5px 10px; радиус границы: 2 пикселя; фон: # 8960a7; цвет: #fff; граница: 1px solid # 5b456a;
И, как мы и ожидали, первый абзац успешно выбран.
- : первый ребенок Демо
Тем не менее, когда мы добавить другой элемент перед первый абзац, скажем, h1, как фрагмент ниже:
Заголовок 1
График 1
Прагмент 2
ПРАГ 3
ПРАГ 4
Прагмент 5
первый абзац не будет выбран, как первый ребенок внутри ДИВ является больше не абзац, но сейчас h1.
Итак, это ситуация, когда : Во-первых, из-типа селектор приходит решить проблему.
p: first-of-type padding: 5px 10px; радиус границы: 2 пикселя; фон: # a8b700; цвет: #fff; граница: 1px solid # 597500;
- : демонстрация первого типа
“Прошлой” селектор
Где есть “первый”, тогда также будет “прошлой”.
Обратной стороной двух селекторов, которые мы обсуждали выше, являются следующие два селектора; :последний ребенок и : Последний из типа. Они в основном такие же, как вышеупомянутые два, за исключением того, что они нацелены на последний потомок указанного элемента.
Например, этот фрагмент ниже будет нацелен на последний абзац внутри div.
p: last-child padding: 5px 10px; радиус границы: 2 пикселя; фон: # 8960a7; цвет: #fff; граница: 1px solid # 5b456a;
- : последний ребенок Demo
И этот фрагмент также будет нацелен на последний абзац в той же ситуации, что мы обсуждали выше; на этот раз сопровождается непосредственно другим элементом.
p: последний из типов padding: 5px 10px; радиус границы: 2 пикселя; фон: # a8b700; цвет: #fff; граница: 1px solid # 597500;
- : последняя демонстрация
Селективизр
Как и любая другая новая функция в CSS3, эти селекторы не поддерживаются в старых браузерах, в основном Internet Explorer от 6 до 8, за исключением для :Первый ребенок селектор, как он был добавлен начиная с CSS2.1. Его относительно :последний ребенок был добавлен только в CSS3.
Итак, если все эти селекторы, которые мы здесь упомянули, действительно необходимы для вашего веб-сайта, вы можете использовать библиотеку JavaScript под названием Selectivizr эмулировать функциональность этих селекторов CSS3.
Для работы Selectivizr зависит от других библиотек JavaScript, таких как jQuery, Dojo, Prototype и MooTools; и, судя по таблице сравнения на официальном сайте, MooTools может обрабатывать все селекторы.
Итак, давайте включим его вместе с Selectivizr следующим образом:
Приведенный выше условный комментарий гарантирует, что эти библиотеки будут загружены только в Internet Explorer 8 и ниже..
Наконец, вы можете просмотреть демо по следующим ссылкам, и теперь оно должно работать как в современных, так и в старых браузерах (IE8 и ниже). Вы также можете скачать исходный файл для дальнейшего изучения. наслаждаться.
- демонстрация
- Скачать исходный код
