ЦСС3 Селектор атрибута Циљање типа датотеке

Овај чланак је део нашег "ХТМЛ5 / ЦСС3 Туториалс сериес" - посвећена да вам помогне да будете бољи дизајнер и / или програмер. Кликните овде да бисте видели више чланака из исте серије.

Тхе селектори атрибута је заиста корисна функција за избор елемента без додавања сувишног ид или класе. Све док циљани елемент има атрибут сличан хреф, срц и тип не морамо то да радимо.

Селектори атрибута су заправо били присутни од ЦСС 2.1, и сада са још неколико типова селектора атрибута доданих у ЦСС3 спецификацијама, у могућности смо да циљамо атрибут елемента још прецизније.

И, у овом посту, користићемо једну од синтакси за избор филе типе која је уметнута као део вредности атрибута.

Синтакса и подршка за прегледач

Тхе филе типе је увек на крају имена датотеке. Дакле, да одаберете то филе типе можемо користити следећу синтаксу [аттр $ = "валуе"]. Ова синтакса користи $ = оператор који ће циљати крај вредности атрибута, на пример:

 а [хреф $ = ". пдф"]: пре бацкгроунд: урл ('… /имагес/доцумент-пдф-тект.пнг') нема понављања;  

Горњи исечак ће изабрати сваку везу са којом вредност атрибута завршава .пдф и убаците икону речи-документа у :пре него што псеудо-елемент.

ПДФ Ицон Соурце: Фугуе Ицонс

Иако је ово уобичајена употреба овог селектора, ми сигурно можемо ићи даље од тога.

Што се тиче компатибилности претраживача; иако је ова синтакса званично уведена као ЦСС3 спецификација, она је заправо подржана Интернет Екплорер 7, тако да га можете безбедно применити кроз све ваше дизајне.

Пример

Никада нећете знати, ако никада не покушате. Само треба да пробамо нешто ново да бисмо боље разумели нешто што још увек не разумемо. Овде ћемо показати како ова синтакса може бити веома корисна и корисна за циљање елемента у одређеној ХТМЛ структури која је некада била тешка за примену користећи само обичан ЦСС.

Испод, имамо Структура ХТМЛ5 да прикажете три слике са њеним насловом. То је само за демонстрациону сврху, ваша ознака не мора бити баш као сљедећи исјечак (нпр. Можете имати само једну слику или чак три слике), али поента је да сазнате како се ова синтакса може примијенити у одређену ХТМЛ структуру.

Свака од горе наведених слика има следеће формате или проширења, јпг, пнг, и гиф. Они такође имају натпис који представља његово проширење слике; овај наслов ће онда деловати као ознака слике.

Дакле, ево плана, ми ћемо дати различите боје позадине за опис за свако друго проширење слике. ЈПГ слика ће добити а зелен боју наслова, ПНГ ће добити Плави, и на крају ГИФ ће добити љубичаста.

Прво, да поставимо позицију ознаке фигуре релативно, јер идемо да применимо апсолутно позицију за наслов.

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

Додајте малу декорацију за слике са границама и сенкама.

 имг бордер: 5пк солид #ццц; -вебкит-бок-схадов: 1пк 1пк 3пк 0пк ргба (0, 0, 0, .5); бок-схадов: 1пк 1пк 3пк 0пк ргба (0, 0, 0, .5);  

Затим постављамо подразумевани стил и позиционирање за наслов. Наслов или ознака слике ће имати квадрат 50пк.

 имг + фигцаптион цолор: #ффф; позиција: апсолутна; топ: 0; десно: 0; видтх: 50пк; хеигхт: 50пк; лине-хеигхт: 50пк; тект-алигн: центар;  

Сада је време да додате боју позадине. Да бисмо то урадили, можемо комбиновати селектор атрибута са суседним селектором, +.

 имг [срц $ = ". јпг"] + фигцаптион бацкгроунд-цолор: # а8б700;  

Исјечак изнад ће циљати сваку слику са атрибутом извора који завршава са .јпг, тада ће суседни селектор пронаћи елемент поред њега. У овом случају фигцаптион ће бити додан са # а8б700 боја позадине.

И овде су сви кодови за остале формате слика, .пнг и .гиф.

 имг [срц $ = ". пнг"] + фигцаптион бацкгроунд-цолор: # 389абе;  имг [срц $ = ". гиф"] + фигцаптион бацкгроунд-цолор: # 8960а7;  

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

• Демо
• Довнлоад Соурце

Извори слике су следећи: МацПро 1, МацПро 2 и МацПро 3

Закључак

Надамо се да можете видети елегантну страну стила користећи посебан селектор, као што смо покушали да демонстрирамо изнад помоћу селектора атрибута. Дакле, следећи пут када стилизујете свој ХТМЛ, препоручујемо вам да урадите неко истраживање о томе да ли се ваш стил може применити помоћу неког специјалног селектора, уместо да уништите правилно структурирани маркуп са додатним класе или ид.

Заправо постоје још два нова селектора овог типа који ћемо покрити у наредним постовима, зато останите у току.