CSS селектори. видови на селектори

, од кои секоја ќе сакате да го поставите одредена боја. Како да го направам тоа? Стандардни CSS селектори не се погодни за тагови, тие укажуваат на параметри за сите блокови одеднаш. Решението е едноставно. Доделување на членовите на групата. На пример, првиот доби div class = "црвена", вториот - class = "сини", третиот - class = "зелени". Сега тие можат да бидат избрани со користење на CSS маси.

Синтаксата е како што следува: Укажува на точка (. ""), Проследено со пишување на името на класата. Да управуваат со првата единица, користење на градежно .red. Второ - .blue и така натаму.

Важно! Се препорачува да се користи значајни вредности на атрибутот класа. Тоа се смета за лоша форма да се користи транслитерација (на пример, krasiviy-блок) или случајни комбинации на букви / броеви (ojfh834871). Во овој код, вие сте обврзани да се збунети, а не да се спомене и тешкотиите со кои ќе се соочи со оние кои ќе бидат ангажирани во проектот по вас. Најдобра опција - да се користи било методологија, како што Ова е нашиот.

Предности - релативно висок степен на флексибилност.

Недостатоци - на повеќе елементи може да биде една и иста класа, што значи дека тие ќе бидат сменети истовремено. Проблемот е решен со користење на методологијата, како и наследството на preprocessors. Бидете сигурни да ја добиете вашата раце помалку, Зас или некој друг препроцесори, тие во голема мера се поедностави работата.

селектор проект

За оваа верзија кодери мислење и програмери се двосмислени. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Некои CSS вежби не се препорачува употреба на проект, бидејќи со неточни апликација што може да предизвика проблеми со наследството. Сепак, многу експерти се активно ги организираме во текот на изгледот. Да се одлучи. # »), затем имя блока. Синтаксата е како што следува: знакот фунта ( "#"), а потоа името на блок. #red. На пример, #red.

отличается от класса по нескольким параметрам. Проект е различен од класата на неколку начини. ID. Прво, на страница не може да се две идентични проект. Тие се доделуваат единствено име. Второ, како селектор има повисок приоритет. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Ова значи дека ако сакате единица класа црвена и наведете во CSS маси црвена боја на позадината, а потоа му ја додели на тоа на ист проект сина и наведете боја сина, единица ќе се претвори сина.

Предности - можете да ги контролирате специфичен елемент, неа стилови на тагови и класи.

ID и class. Недостатоци - лесно да се изгуби во голем број на лична карта и класа.

Важно! ID вам, в общем-то, не нужны. Ако користите методологија Ова е нашиот (или аналози), проект за вас, воопшто, не се потребни. Оваа техника вклучува употреба на изгледот на разни категории кои многу поудобно.

универзална селектор

{}. Синтакса: знак старлети ( "") и загради, односно, {*} ...

Се користи за да доделите одредени атрибути еднаш сите елементи од страната. Кога тоа може да биде корисно? box-sizing: border-box. На пример, ако сакате да го поставите на страница со својства кутија големината: безграничната кутија. div *{}. не може да се користи само за да управуваат со сите компоненти на документот, но исто така и за контрола на сите деца на одреден блок, на пример, div * {}.

Предности - можете да ги контролирате голем број на предмети во исто време.

Конс - не е доволно флексибилен опција. Покрај тоа, употребата на ова копче, а во некои случаи се забави работата на страницата.

со атрибути

Го прават тоа можно за контрола на елемент со специфична особина. На пример, може да има голем број на влезни тагови со различен тип атрибут. Еден од нив - текст, вториот - лозинка, третиот - број. Се разбира, можете да го поставите секоја класа или лична карта, но тоа не е секогаш лесен. CSS селектори на атрибути го прават тоа можно да се определи вредности за некои од таговите со максимална прецизност. На пример, како оваа:

внесување на [тип = "текст"] {}

Ова селектор ќе изберете сите атрибути со типот на внесување на текст.

Алатката е доста флексибилен и може да се користи со било кој од маркерите, во која може да има атрибути. Но, тоа не е се! спецификација CSS има способност за контрола на елементи со уште поголема удобност!

Замислете дека вашата страница има влез со случаеви атрибутот = "Внесете име" и влез случаеви = "Внесете лозинка". Тие, исто така може да бидат избрани со користење на селектор! За да го направите ова, користете следнава структура:

влез [случаеви = "Внесете го името"] {} или влез [случаеви = "Внесете ја лозинката"]

Можеби уште флексибилна работа со атрибути. Да речеме дека имате голем број на тагови со слични атрибути наслов (на пример, "Каспиското" и "Каспиското"). За да одберете двете, користете ги следните избори:

[Име * = "Kaspiysk"]

CSS ќе изберете сите елементи во насловот на која има симболи на "Каспиското", односно. Е., И "Каспиското" и "Каспиското".

Можете исто така да изберете ознаки што почнуваат со атрибути на одреден карактер:

[Име на ^ = "карактерот што сакате"] {}

или да ги престанува:

[Име на $ = "вистинскиот карактер"] {}.

Предности - максимална флексибилност. Можете да изберете било кој постоечки страница елементи без Месинг со часови.

Недостатоци - се користи релативно ретко, само во одредени случаи. Многу веб дизајнери претпочитаат да методологијата, бидејќи класа поентата е полесно отколку да се организира бројни квадратни загради и знаци "еднакви". Покрај тоа, овие селектори не работат во верзии на Internet Explorer 7 и подолу. Сепак, кои се сега треба старата Internet Explorer?

псевдо-класа селектори

Одредува елемент псевдо-статус. На пример ,: лебдиш - што се случува со дел од страницата кога ќе лебдат ,: посетиле - посетените линк. Таа исто така вклучува елементи како што се: прво дете и: последна дете.

Овој тип на менувачот е активно се користи во модерен изглед, бидејќи благодарение на тоа може да се направи страница "во живо" без употреба на JavaScript. На пример, сакате да бидете сигурни дека кога ќе лебдат над копчето со класа на btn бојата се менува. Да го направите ова, ние ги користиме следнава структура:

.btn: hover {

background-color: црвена;

}

Убавина може да се наведени во основните својства на копчето, транзицијата сопственост, на пример, 0.5s - во овој случај, копчето ќе не руменило веднаш, и во рок од половина секунда.

Доблести - се користат за "оживувањето" на страници. Лесен за употреба.

Недостатоци - тие не се. Ова е многу корисна алатка. Сепак, неискусни веб дизајнери може да се изгуби во изобилството на псевдо-класа. Проблемот е решен студија и пракса.

псевдо-селектори

"Псевдо" - тоа се делови од страната што не се во HTML, но тие се уште може да се управува. Што не е јасно? Тоа е многу полесно отколку што изгледа. На пример, сакате да се направи првата буква во низа големи и црвено, оставајќи ги другите мали и црн текст. Се разбира, тоа може да се заклучи дека писмото на век со одредена класа, но тоа е долг и здодевен. Тоа е многу полесно да го изберете целиот став и да го користите псевдо :: прва буква. Тоа дава можност за контрола на појавата на првата буква.

Има прилично голем број на псевдо-елементи. ги листа во една статија е веројатно нема да успее. Може да се најдат релевантни информации во вашиот омилен пребарувач.

Предности - да обезбеди флексибилност за да го прилагодите изгледот на страната.

Недостатоци - нови за нив често се збунети. Многу селекции на овој вид на работа само во некои прелистувачи.

да резимираме

Селектор - моќна алатка за контрола на документот проток. Благодарение на него, може да изберете секоја компонента на страница (постојат дури и само делумно). Бидете сигурни дека за да дознаете сите опции на располагање, или дури и да ги запишам. Ова е особено важно ако се создаде комплекс страници со модерен дизајн и многу интерактивни елементи.