CSS3 Селектор на атрибути Насочване към типа на файла

Тази статия е част от нашата "Серия уроци на HTML5 / CSS3" - посветен да ви помогне да сте по-добър дизайнер и / или разработчик. Натисни тук за да видите повече статии от същата серия.

Най- селектори на атрибути е наистина полезна функция за избор на елемент без добавяне на излишно документ за самоличност или класове. Докато целевият елемент има атрибут като HREF, SRC и Тип ние не трябва да го правим.

Селекторите на атрибути всъщност са били наоколо след CSS 2.1, и сега с още няколко вида селектори на атрибути, добавени в спецификациите на CSS3, можем да насочим атрибута на елемента още по-конкретно.

И в този пост ще използваме един от синтаксиса, за да изберем тип файл която се вмъква като част от стойността на атрибута.

Поддръжка на синтаксиса и браузъра

Най- тип файл е винаги в края на името на файла. Така че, за да изберете това тип файл можем да използваме следния синтаксис [ATTR $ = "стойност"]. Този синтаксис използва $ = оператор, който ще насочи края на стойността на атрибута, например:

 a [href $ = ". pdf"]: преди background: url ('… /images/document-pdf-text.png') не се повтаря;  

Отрязъкът по-горе ще избере всяка връзка, с която завършва стойността на атрибута .PDF и вмъкнете икона на дума-документ в :преди псевдо-елемент.

Източник на икона на PDF: Икона на фугата

Макар че това е обичайно използване на този селектор, ние със сигурност можем да надхвърлим това.

Относно съвместимостта на браузъра; въпреки че този синтаксис е официално въведен като CSS3 спецификация, той всъщност се поддържа оттогава Internet Explorer 7, така че можете спокойно да го приложите през всичките си проекти.

Примерът

Никога няма да разбереш ако не опиташ. Просто трябва да опитаме нещо ново, за да разберем по-добре нещо, което все още не разбираме. Така че тук ще покажем как този синтаксис може да бъде много полезен и удобен за насочване на елемент в конкретна HTML структура, която е била малко трудно да се приложи, използвайки само обикновен CSS..

По-долу имаме Структура на HTML5 , за да изведете три изображения с неговия надпис. Той е само за демонстрация, маркирането не трябва да бъде точно като следния фрагмент (например може да имате само едно изображение или дори още три изображения), но въпросът е, че можете да научите как може да се приложи този синтаксис конкретна HTML структура.

Всяко от изброените по-горе изображения има следните формати или разширения, JPG, PNG, и GIF. Те също имат надпис, който представлява неговото разширение на изображението; този надпис ще действа като етикет на изображението.

Така че, тук е планът, ние ще дадем различни фонови цветове за надписа за всяко различно разширение на изображението. JPG изображението ще получи a зелен цвят на надписа, PNG ще получи син, и накрая GIF ще получи лилаво.

Първо, нека да настроим позицията на етикета на фигурата сравнително, защото ще се приложим абсолютен позиция за надписа.

 фигура позиция: относителна;  

Добавете малка украса за изображенията с граници и сенки.

 img border: 5px solid #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

И тогава ние задаваме стила по подразбиране и позиционирането за надписа. Надписът или етикетът на изображението ще имат квадрат 50 пиксела.

 img + figcaption color: #fff; позиция: абсолютна; отгоре: 0; вдясно: 0; ширина: 50px; височина: 50px; височина на линията: 50px; text-align: center;  

Сега е време да добавите цвета на фона. За да направите това, можем да комбинираме селектора на атрибути със съседния селекционер, +.

 img [src $ = ". jpg"] + figcaption цвят на фона: # a8b700;  

Отрязъкът по-горе ще се насочва към всяко изображение с атрибута източник, завършващ с .JPG, тогава съседният селектор ще намери елемента до него. В този случай figcaption ще бъдат добавени към # a8b700 Цвят на фона.

И тук са всички кодове за останалите формати за изображения, .png и .gif.

 img [src $ = ". png"] + figcaption цвят на фона: # 389abe;  img [src $ = ". gif"] + figcaption цвят на фона: # 8960a7;  

Сега, нека да видим как се оказва на живо от демо връзката по-долу, или пък можете да изтеглите източника, за да го разгледате офлайн.

• Демонстрация
• Изтеглете Източник

Източниците на изображения са както следва: MacPro 1, MacPro 2 и MacPro 3

заключение

Надяваме се, че можете да видите елегантната страна на стила с помощта на специален селектор, подобно на това, което сме се опитали да покажем по-горе, като използваме атрибут selector. Така че, следващия път, когато стилизирате HTML, ние ви препоръчваме да направите някои изследвания за това дали вашият стил може да се приложи с помощта на специален селектор, вместо да се разруши правилно структурираната ви маркировка с допълнителни класове или документ за самоличност.

Всъщност има още два нови селектора от този тип, които ще разгледаме в следващите постове, така че следете за това.