CSS- ի selectors: տեսակներ selectors

, որոնցից յուրաքանչյուրը դուք ուզում եք սահմանել կոնկրետ գույն. Ինչպես դա անել? Ստանդարտ CSS selectors չեն հարմար tags, նրանք ցույց են տալիս պարամետրերի բոլոր բլոկների միանգամից. Որ լուծումը պարզ է. Վերագր դասարանի անդամներին. Օրինակ, առաջին անգամ ստացել div class = 'կարմիր', երկրորդ կարգի = 'կապույտ', երրորդ կարգի = 'կանաչ'. Այժմ նրանք կարող են ընտրված օգտագործելով CSS սեղաններ:

The շարահյուսություն հետեւյալն է. Ցույց է տալիս, կետ ( «»), որին հաջորդում են գրավոր անունը դասի. Կառավարել առաջին միավորը, օգտագործել շինարարությունը Կարմիր: Երկրորդ - .Blue եւ այլն:

Կարեւոր է! Այն խորհուրդ է տրվում օգտագործել իմաստալից արժեքները դասի հատկանիշի: Այն համարվում է վատ ձեւ է օգտագործել թարգմանությունը, (օրինակ, krasiviy-blok) կամ պատահական տառերի համակցություններ / համարներով (ojfh834871): Այս օրենսգրքի, դուք պարտավորվում է ստանալ շփոթված, էլ չենք խոսում այն դժվարությունները, որոնք բախվում են նրանք, ովքեր պետք է զբաղվի նախագծին հետո ձեզ. Լավագույն տարբերակն է օգտագործել ցանկացած մեթոդաբանություն, ինչպես, օրինակ, bem:

Առավելությունները - համեմատաբար բարձր ճկունությունը:

Թերությունները - բազմակի տարրերը կարող են լինել մեկ եւ նույն դասի, որը նշանակում է, որ նրանք պետք է խմբագրվել միաժամանակ: Խնդիրը լուծվում է օգտագործելով մեթոդաբանությունը, ինչպես նաեւ ժառանգումը preprocessors: Վստահ լինել, որպեսզի ստանալ ձեր ձեռքերը, ավելի քիչ, Sass կամ որեւէ այլ preprocessor, նրանք մեծապես պարզեցնել աշխատանքը:

ID ընտրությունը

Օգտվողի Այս տարբերակի կարծիքի կոդավորողներ եւ ծրագրավորողների միանշանակ չեն: CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Որոշ CSS ճանապարհները չեմ տալիս օգտագործումը ID, քանի որ սխալ կիրառման նրանք կարող են առաջացնել խնդիրներ ժառանգութեան: Սակայն, շատ փորձագետներ են ակտիվորեն կազմակերպել նրանց ողջ դասավորությունը: Դուք որոշեք. # »), затем имя блока. The շարահյուսություն հետեւյալն է. Ֆունտ նշան ( "#"), ապա անունը բլոկում. #red. Օրինակ, #red.

отличается от класса по нескольким параметрам. Կոմսություն տարբերվում է դասի մի քանի ձեւերով. ID. Առաջին, էջ չի կարող լինել երկու նույնական ID: Նրանք նշանակվում է յուրահատուկ անուն: Երկրորդ, նման ընտրությունը ունի ավելի բարձր գերակայություն է. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Սա նշանակում է, որ եթե դուք նշեք մի միավոր դասի կարմիր եւ նշեք է CSS աղյուսակներում կարմիր ֆոնի գույնը, ապա նշանակում է այն նույն id կապույտ եւ նշեք գույնը կապույտ, միավորը կդառնա կապույտ.

Առավելությունները - Դուք կարող եք վերահսկել առանձին տարրը, անտեսելով ոճերի թեգերը եւ դասերի:

ID и class. Թերությունները - հեշտ է կորչում է մի մեծ թվով նկարներ եւ դասի.

Կարեւոր է! ID вам, в общем-то, не нужны. Եթե դուք օգտագործում եք ԲԵՄ մեթոդաբանությունը (կամ դրա նմանը) ID ձեզ, ընդհանուր առմամբ, չեն պահանջվում: Այս տեխնիկան ներառում է օգտագործման սպասք եզակի դասերի, որոնք շատ ավելի հարմար է.

ունիվերսալ ընտրությունը

{}. Շարահյուսություն: Աստղիկներ նշան ( "*") եւ braces, այսինքն, {*} ...

Օգտագործվում է հանձնարարել որոշակի հատկանիշներ, երբ բոլոր տարրերը էջում: Երբ դա կարող է օգտակար լինել. box-sizing: border-box. Օրինակ, եթե դուք ուզում եք սահմանել է էջ գույքային տուփ չափսերի: սահմանային-արկղը. div *{}. Կարող է ոչ միայն կարելի է, որն օգտագործվում է կառավարել բոլոր բաղադրիչները փաստաթղթի, այլեւ վերահսկել բոլոր երեխաներին նշված բլոկի, օրինակ, div * {}.

Առավելությունները - Դուք կարող եք վերահսկել մի մեծ քանակությամբ իրեր միաժամանակ.

Դեմ - բավականին ճկուն տարբերակ: Բացի այդ, օգտագործել այս ընտրությունը, որոշ դեպքերում դանդաղեցնել էջը աշխատանքը:

ըստ ատրիբուտների

Դարձրեք այն հնարավոր է վերահսկել տարրը մի կոնկրետ հատկանիշի: Օրինակ, դուք ունեք մի շարք մուտքային թեգերը հետ տարբեր հատկանիշի տեսակի. Նրանցից մեկը, - տեքստը, իսկ երկրորդը գաղտնաբառը, իսկ երրորդը `թիվ. Իհարկե, դուք կարող եք սահմանել յուրաքանչյուր դաս կամ ID-, բայց դա միշտ չէ, որ հարմար. CSS selectors Հատկանիշների դարձնել այն հնարավոր է ճշտել արժեքները որոշակի tags առավելագույն ճշգրտությամբ. Օրինակ, հավանում են սա:

մուտքագրում [type = 'text'] {}

Այս ընտրությունը կլինի ընտրել բոլոր հատկանիշները տեսակից Մուտքագրումները:

Այդ գործիքը բավական ճկուն է եւ կարող է օգտագործվել հետ որեւէ tags, որում կա, կարող են լինել ատրիբուտներ: Բայց դա դեռ ամենը չէ: CSS- ը հստակեցում ունի կարողությունը վերահսկել այն տարրերը, ինչպես նաեւ նույնիսկ ավելի հարմարության.

Պատկերացրեք, որ ձեր էջ մուտքագրվել հետ հատկանիշի placeholder = "Մուտքագրեք անունը» եւ մուտքագրում տեղապահ = "Մուտքագրեք գաղտնաբառը»: Նրանք կարող են նաեւ ընտրված օգտագործելով selector! Որպեսզի դա անել, օգտագործել հետեւյալ կառուցվածքը.

մուտքագրում [տեղապահ = "Մուտքագրեք"] {} կամ մուտքային [տեղապահ = "Մուտքագրեք գաղտնաբառը"]

Թերեւս ավելի ճկուն հետ աշխատանքը ատրիբուտներով: Եկեք ասում են, դուք ունեք մի շարք թեգերը նմանատիպ ատրիբուտներով կոչման համար (օրինակ, «Կասպից» եւ «Կասպից»): Է ընտրել, թե, օգտագործել հետեւյալ ընտրանքները.

[Վերնագիր * = "Kaspiysk"]

CSS կարող եք ընտրել բոլոր այն կետերը, որի խորագիրն կան խորհրդանիշները «Կասպից ծովի», այսինքն, E., եւ «Կասպից ծովի» եւ «Կասպից ծովի».

Դուք կարող եք նաեւ ընտրել tags, որոնք սկսվում են որոշակի բնույթ ատրիբուտներից:

[Վերնագիր ^ = »բնույթը դուք ուզում եք"] {}

կամ դադարեցնել դրանք:

[Վերնագիր $ = "ճիշտ բնույթ»] {}:

Առավելությունները - առավելագույն ճկունություն. Դուք կարող եք ընտրել ցանկացած առկա Էջի տարրեր, առանց messing հետ դասերի.

Թերությունները - օգտագործվող համեմատաբար հազվադեպ, միայն առանձին դեպքերում: Շատ վեբ դիզայներները նախընտրում է մեթոդաբանության, քանի որ խոսքը դասը ավելի հեշտ է, քան կազմակերպել բազմաթիվ քառակուսի փակագծերը եւ նշաններ «հավասար»: Բացի այդ, այդ selectors չեն աշխատում Internet Explorer տարբերակների 7 եւ ցածր. Սակայն, ովքեր այժմ պետք է հին Internet Explorer.

կեղծ-class selectors

Նշանակում է կեղծ-կարգավիճակ տարր. Օրինակ ,: սավառնել - Ինչ է տեղի ունենում մասի էջում, երբ դուք անցեք ,: այցելեց - ի այցելել հղումը: Այն նաեւ ներառում է տարրեր, ինչպիսիք են: Առաջին երեխայի եւ `նախորդ երեխայի.

Այս տեսակի ընտրությունը ակտիվորեն օգտագործվում է ժամանակակից դիրքով, քանի որ շնորհիվ դրա, Դուք կարող եք կատարել էջը «կենդանի», առանց օգտագործման JavaScript- ը: Օրինակ, դուք ցանկանում եք համոզվել, որ այն ժամանակ, երբ դուք անցեք կոճակը հետ դասի կճկ իր գույնը փոխվել: Որպեսզի դա անել, մենք օգտագործում ենք հետեւյալ կառուցվածքը.

.btn: Հովեր {

Ֆոնի գույնը, կարմիր;

}

Գեղեցկության կարող է նշված հիմնական հատկությունների կոճակը, որ անցումային գույքի, օրինակ, 0.5s - Այս դեպքում է, որ կոճակը չի կարմրել ակնթարթորեն, եւ շուրջ կես վայրկյանից:

Առաքինություններն - լայնորեն օգտագործվում է «Վերածնունդ» էջերի. Հեշտ է օգտագործման համար.

Թերությունները - նրանք չեն. Սա իսկապես հարմար գործիք. Սակայն, անփորձ վեբ դիզայներները կարող է կորչում է առատությամբ կեղծ դասերի. Խնդիրը լուծվում ուսումնասիրություն եւ պրակտիկան.

կեղծ selectors

«Կեղծ», - սրանք հատվածներ էջի որոնք ոչ թե HTML, բայց նրանք դեռ կարող են հասցրել: Դուք չեք հասկանում? Դա շատ ավելի հեշտ է, քան թվում է: Օրինակ, դուք ցանկանում եք, որպեսզի առաջին նամակ պարանի մեծ ու կարմիր, թողնելով մյուս փոքր եւ սեւ տեքստը: Իհարկե, կարելի է եզրակացնել, որ նամակը մի span հետ որոշակի դասի, բայց դա երկար ու ձանձրալի: Դա շատ ավելի հեշտ է ընտրել ամբողջ պարբերություն եւ օգտագործել կեղծ :: առաջին տառը: Այն հնարավորություն է տալիս վերահսկել տեսքը առաջին նամակում:

Կան բավականին մեծ թվով կեղծ տարրերից. Նշեք դրանք մեկ հոդվածում քիչ հավանական է հաջողության հասնել. Դուք կարող եք գտնել համապատասխան տեղեկատվություն ձեր սիրած որոնման.

Առավելությունները - տրամադրել ճկունություն է հարմարեցնել տեսքը էջում:

Թերությունները - նոր է նրանց հաճախ շփոթում են. Շատ ընտրության այս տեսակի աշխատանքի միայն որոշակի բրաուզերների.

To ամփոփել

Selector - հզոր գործիք է փաստաթղթաշրջանառության հսկողության. Շնորհիվ նրա, դուք կարող եք ընտրել յուրաքանչյուր բաղադրիչը էջի (կան նույնիսկ միայն մասամբ): Վստահ լինել, իմանալ, թե բոլոր տարբերակները հասանելի են, կամ նույնիսկ գրել նրանց ներքեւ. Սա հատկապես կարեւոր է, եթե դուք ստեղծել բարդ էջեր, ինչպես նաեւ ժամանակակից դիզայնով եւ շատ ինտերակտիվ տարրերի.