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