Մենյու
տունԼուսանկարների խմբագիրներ

հարակից ընտրիչներ. CSS ձեռնարկ - CSS հարակից ընտրիչներ Css հարակից տարրեր

CSS շարահյուսությունը պարզ է, և դա հասկանալու համար ձեզ հարկավոր չէ ՏՏ ոլորտում PhD: Այնուամենայնիվ, դա այն քիչ հայտնի լեզուներից է, որը տրամաբանական չէ բառի բուն իմաստով: Ի տարբերություն այլ վեբ ծրագրավորման լեզուների, ինչպիսիք են JavaScript-ը և PHP-ն, CSS խնդիրներսովորական տրամաբանությամբ չի լուծվում. Ալգորիթմները, ինչպիսիք են «եթե X, ապա արեք Y, այլապես արեք Z» կամ «ընտրեք բոլոր Y-ը, ապա արեք X նրանց հետ» նման ալգորիթմները չեն կարող իրականացվել այնպիսի լեզվով, ինչպիսին է CSS-ը: Պարզ ասած, դա դիզայնի համար նախատեսված լեզու է, դիզայներների, այլ ոչ թե մշակողների լեզու: Փորձառու ծրագրավորողներից ոմանք, որոնց հետ ես աշխատել եմ, մեծ ջանքեր են գործադրել CSS-ին տիրապետելու համար հենց այս պատճառով:

CSS-ի ուսուցումը սկսվում է դասերից և ID-ներից և օգտագործումից: և #՝ տարրերն ուղղակիորեն նշելու համար: Սա բավարար է լիարժեք ֆունկցիոնալ կայք կառուցելու համար, սակայն այն բավականաչափ ճկուն չէ ամբողջական վերադիզայնի դեպքում։ Եկեք դիտարկենք այս դժվար հասանելի տարրերը կառավարելու այլընտրանքային մոտեցումը:

Հարևանների հետ կապված կոմբինատոր
Սկսենք ընտրիչից, որը հարմար է դժվար իրավիճակներում՝ հարևան հարակից կոմբինատորից: Հարևան փոխկապակցված կոմբինատորը նշվում է + նշանով երկու տարր միացնելով.

H1+p
Սա ընտրում է հաջորդ p տարրը DOM-ում h1 տարրից անմիջապես հետո: Տպագրական տեսությունը ենթադրում է, որ մենք պետք է տեքստի պարբերություններն անցնենք, բայց միայն այն դեպքում, եթե դրանք հաջորդում են մեկ այլ պարբերության: Գործնականում սա կարող է օգտագործվել բոլոր պարբերությունները մատնանշելու համար, բացառությամբ առաջինի.
p + p (տեքստային նահանջ՝ 1em; )
Սա շատ ավելի հարմար է, քան առաջին պարբերությունը class="first"-ով ընդգծելը: Երեք տող, առանց դասերի և զննարկչի ամբողջական աջակցություն: Եթե ​​դուք բովանդակության հետ կապված img պիտակներ եք դնում p պիտակների ներսում (ինչպես պետք է լինեք), կարող եք պարզապես հետ մղել դրանց ձախ եզրերը բացասական -1em արժեքով.
p + p img (լուսանցք-ձախ՝ -1em;)
Բավականին պարզ, չէ՞: Ի՞նչ կլիներ, եթե մենք ցանկանայինք վերնագրերից անմիջապես հետո ընդգծել բոլոր պարբերությունների առաջին տողը, առանց մյուս բոլոր պարբերությունները փոխելու: Կրկին, մենք կարող ենք օգտագործել view դասը: Պարզ ընտրիչը, որը պատրաստված է հարևան բարդ կոմբինատորից և կեղծ տարրից, կկատարի հետևյալը.
h1 + p::first-line ( տառատեսակ-տարբերակ: small-caps; )
Նշում. :first-line pseudo-element-ն ընդունվել է CSS 2.1-ում, CSS 3-ն օգտագործում է նշումը՝ կեղծ դասերը և կեղծ տարրերը տարբերելու համար:

ժառանգական կոմբինատոր
Սովորական նշագրման արձանագրությունն այն է, որ բաժիններն անվանակոչված տարրի ներսում #էջի կամ #wrap-ի մեջ դնելն է:

Նկարագրություն

Վեբ էջի տարրերը կոչվում են հարեւաններ, երբ նրանք ուղղակիորեն հետևում են միմյանց փաստաթղթի կոդում:

Շարահյուսություն

E + F (Ոճի կանոնների նկարագրություն)

Հարևան տարրերի ոճը կառավարելու համար օգտագործվում է գումարած նշանը (+), որը տեղադրված է երկու ընտրիչների միջև՝ E և F: Պլյուսի շուրջ տարածությունները կամընտիր են: Այս նշման ոճը կիրառվում է F տարրի վրա, բայց միայն այն դեպքում, եթե այն հարում է E տարրին և անմիջապես հետևում է դրան։ Դիտարկենք մի քանի օրինակ։

Lorem ipsum դոլորնստել ամետ.

Նշել պիտակի երեխա է

Քանի որ այն գտնվում է այս տարայի ներսում: Համապատասխանաբար

Գործելով որպես ծնող .

Lorem ipsum դոլոր նստելամետ.

պիտակներ Եվ չեն համընկնում և հարակից տարրեր են: Այն փաստը, որ դրանք գտնվում են կոնտեյների ներսում

Չի ազդում նրանց վերաբերմունքի վրա:

Լորեմ ip գումարդոլոր նստել ամետ, հաջորդող adipiscing էլիտար.

Այստեղ հարևան են թեգերը Եվ , և Եվ . Որտեղ Եվ հարակից տարրերը չեն կիրառվում, քանի որ նրանց միջև կա կոնտեյներ .

HTML5 CSS 2.1 IE Cr Op Sa Fx

Հարակից սելեկտորներ

Լորեմ ip գումարդոլոր նստել ամետ, հաջորդողդիպչող էլիտա.

Lorem ipsum dolor sit amet, հաջորդողդիպչող էլիտա.



Այս օրինակի արդյունքը ներկայացված է Նկ. 1.

Բրինձ. 1. Կարմիր տեքստի գույնը հարակից ընտրիչների համար

Բրաուզերներ

Internet Explorer 7-ը ​​չի կիրառում ոճավորում, եթե ընտրիչների միջև կա մեկնաբանություն (B + /* գումարած */ I ):

Ոչ վաղ անցյալում թողարկվեց Internet Explorer բրաուզերի նոր՝ ութերորդ տարբերակը, և բոլոր վեբ վարպետները թեթեւացած շունչ քաշեցին: Ի վերջո, վերջապես, Microsoft-ի բրաուզերը, թեև հսկայական ուշացումով, սկսեց քիչ թե շատ հարգել HTML-ի և CSS-ի բնութագրերը և համարժեք ցուցադրել վեբ էջերը: Ընդհանրապես յոթերորդ տարբերակից բոլորը սա էին սպասում։ Սակայն առաջին հայացքից այն ոչ մի նոր բան չբերեց, բացի ներդիրների օգտագործման աջակցությունից։ Բայց սա միայն առաջին հայացքից... Քչերը գիտեն IE7-ի մեկ այլ շատ նշանակալից նորարարության մասին. հենց այս տարբերակում էր, որ բրաուզերը առաջին անգամ սկսեց աջակցել CSS ընտրիչների նոր տեսակներին:

Ընտրիչը CSS կանոնի մի մասն է, որը սահմանում է, թե որ տարրերի վրա այն կիրառել: Նրանց հիմնական տեսակները հայտնի են գրեթե բոլոր վեբ վարպետներին: Բայց ոչ շատ մարդիկ են լսել այնպիսի «էկզոտիկների» մասին, ինչպիսիք են հարևան և մանկական սելեկտորները, ինչպես նաև ատրիբուտների ընտրիչները: Դա պայմանավորված է նրանով, որ իմաստ չկար դրանք երկար ժամանակ օգտագործել, քանի որ ամենահայտնի բրաուզերներից մեկը՝ Internet Explorer-ը, չէր ապահովում դրանց աջակցությունը։ Սակայն այժմ իրավիճակը փոխվել է, և բացված նոր հնարավորությունները մի կողմ թողնելն այնքան էլ խելամիտ չի լինի։ Այդ իսկ պատճառով ես որոշեցի գրել այս կարճ ակնարկը։

Հարակից սելեկտորներ

Նշում է, որ CSS կանոնը կիրառվում է տարրի վրա միայն այն դեպքում, երբ այն հարևան է որևէ այլ տարրի: Օրինակ:

Տարրերը կոչվում են հարևաներբ էջի կոդը նրանք , և նրանց միջև այլ տարրեր չկան

Ահա հարակից պիտակները Եվ , և Եվ . պիտակներ Եվ հարևան չեն, քանի որ նրանց միջև «սեպ է խրվել» օտար տարր .

Կից ընտրիչ գրելու շարահյուսությունը հետևյալն է.

I տարր + II տարր (...)

Մեր օրինակի համար սահմանենք այսպիսի կանոն.

ուժեղ + em (գույնը՝ կարմիր;)
ուժեղ + ներ (գույնը՝ կապույտ;)

Ահա թե ինչպիսին կլինի արդյունքը.

Ինչպես տեսնում եք, ոճը փոխվել է միայն թեգի համար , և պիտակը չի ազդել. Սա շատ լավ ցույց է տալիս հարևանության կանոնը:

Եկեք կատարենք ևս մեկ փորձ՝ փոխարինել մեր օրինակում վրա :

Տարրերը կոչվում են հարևաներբ էջի կոդը նրանք գտնվում են միմյանց կողքին, և նրանց միջև այլ տարրեր չկան

Ինչպես կարող եք կռահել, երկրորդ պիտակի ոճը Չի փոխվի.

Դա պայմանավորված է նրանով, որ այն այլևս հարևան չի լինի .

Երեխաների ընտրիչներ

Նշում է, որ CSS կանոնը կիրառվում է միայն տարրի նկատմամբ, երբ այն որևէ այլ տարրի զավակ է: Օրինակ:

Տարրն ասում են, որ այն տարրի զավակն է, որի մեջ տեղադրված է, եթե այն կա է անհապաղժառանգայս տարրը

Այստեղ պիտակը երեխաներն են պիտակի հետ կապված

Եվ նկատմամբ . Նշել պիտակի հետ կապված

Դա երեխա չէ, քանի որ դա նրա անմիջական ծնողը չէ:

Գրելու շարահյուսությունը հետևյալն է.

I տարր > II տարր (…)

Երեխաների ընտրիչները շատ նման են համատեքստի հայտնի ընտրիչներին, միայն այն տարբերությամբ, որ համատեքստի ընտրիչների համար տարրերի բնադրման խորությունը նշանակություն չունի: Երեխաների համար բնադրման խորությունը չի կարող լինել մեկ մակարդակից ավելի: Եկեք այս ամենը ցույց տանք մեր օրինակի համար որոշ կանոններ սահմանելով.

p >
p > em (գույնը՝ կապույտ; ) /* Երեխաների ընտրիչ */

Մենք կստանանք հետևյալ արդյունքը.

Մեր դեպքում պիտակը -ի երեխա չէ

Որովհետև այն գտնվում է նրա մեջ բնադրելու երկրորդ մակարդակում։ Բնականաբար, նրա մոտ չստացվեց այն ոճը, որը պետք է տեքստը կապույտ դարձներ։

Այժմ եկեք փոխարինենք երեխայի ընտրիչը համատեքստի ընտրիչով.

p > ուժեղ (գույնը՝ կարմիր; ) /* Երեխաների ընտրիչ */
p em (գույնը՝ կապույտ; ) /* Համատեքստի ընտրիչ */

Արդյունքը կանխատեսելի է.

Ի տարբերություն երեխայի ընտրողի, կոնտեքստային ընտրիչը այս դեպքում «աշխատեց», քանի որ նրան չի հետաքրքրում բնադրման մակարդակի խորությունը:

Հատկանիշների ընտրիչներ

Նշում է, որ CSS կանոնը կիրառվում է միայն այն տարրերի վրա, որոնք պարունակում են ընտրիչում նշված հատկանիշը։ Օրինակ:

CSS-ը շատ կարևոր տեխնոլոգիա է, առանց որի հնարավոր չէ գոնե պատշաճ կայք ստեղծել։


CSS-ի հիմնական հասկացություններն են ոճի կանոնները, ընտրիչները, հատկությունները և դրանց արժեքները:

Այստեղ միայն առաջին պարբերությունն ունի ինքնորոշված ​​պարամետր (կամ հատկանիշ, որը նույնն է) align: Հետևաբար, CSS կանոնը align հատկանիշի ընտրիչի համար կկիրառվի առաջին պարբերության և միայն դրա վրա:

Հատկանիշների ընտրիչի մուտքի շարահյուսությունը հետևյալն է.

[հատկանիշ] (...)

Եկեք մեր օրինակի համար կանոն կազմենք (հստակության համար, հատկանիշից բացի, մենք կնշենք նաև բուն պիտակը, որի համար պետք է հաշվի առնել).

p (գույնը՝ կանաչ; տառատեսակի քաշը՝ թավ; )

Թե ինչ կլինի վերջում, հեշտ է կռահել.

Մինչ այժմ ես նկարագրել եմ այսպես կոչված պարզ հատկանիշի ընտրիչը։ Նրա համար կարևոր է միայն հատկանիշի առկայությունը պիտակի վրա, բայց դրա արժեքը բոլորովին կարևոր չէ։ Մինչդեռ կան այլ տեսակի հատկանիշի ընտրիչներ: Եկեք համառոտ նայենք դրանց.

[հատկանիշ = "արժեք"] (...)

Կիրառվում է միայն այս հատկանիշի համար նշված արժեք ունեցող տարրերին:

[հատկանիշ ^ = «արժեք»] (…)

Գրեթե նույնը, միայն այս դեպքում հատկանիշը պետք է սկսվի միայն նշված արժեքից, և պարտադիր չէ, որ այն ամբողջությամբ պարունակի։

[attribute$="value"] (...)

Նմանապես, այն տարբերությամբ, որ այստեղ հատկանիշը պետք է ավարտվի նշված արժեքով։

[հատկանիշ*=”արժեք”] (…)

Այս նշումը ցույց է տալիս, որ արժեքը կարող է առաջանալ հատկանիշի ցանկացած կետում:

Ինչպես տեսնում եք, հարեւանի, երեխայի և հատկանիշի ընտրիչները մեզ տալիս են արդյունավետ CSS կոդ գրելու շատ նոր եղանակներ: Դուք կարող եք բերել հսկայական թվով օրինակներ, որոնցում դրանց օգտագործումը նախընտրելի կլինի «ավանդական» հայտնի սելեկտորներից: Հետևաբար, կարծում եմ, որ խելամիտ կլինի օգտագործել այս տեխնիկան: Ինչպես օգտագործել դրանք, կախված է ձեզանից:


Հոդվածի հեղինակ՝ Ալեքսեյ Անտոնով, վեբ տեխնոլոգիաների մասին բլոգի ստեղծող և ադմինիստրատոր www.lounwolf.ru
=====================================================================

Հարակից տարրի ընտրիչը ընտրում է տարրը փաստաթղթի կոդի մեկ այլ նշված տարրից անմիջապես հետո: Եկեք որպես օրինակ վերցնենք html կոդի մի հատված:

պարբերություն և դրանում չաղտարր, և այստեղ հակվածտարր.

Այստեղ կան երեք պիտակներ.

, Եվ . պիտակներ Եվ բույն դրված տարայի մեջ

Նրանք նրա զավակներն են։ Բայց միմյանց նկատմամբ հարևան են։

Հարակից ընտրիչի շարահյուսությունը նախորդ տարրի ընտրիչն է, որին հաջորդում է «+» նշանը, որին հաջորդում է ընտրվող տարրի ընտրիչը: Եկեք աշխատենք հարևան ընտրողի հետ.

Հարևանների ընտրիչ CSS-ում:

պարբերություն և դրանում չաղտարր, և այստեղ հակվածտարր.

Այստեղ չաղԵվ ընդգծել էտարրեր, ավելին հակված.



Օրինակում դուք կարող եք տեսնել, որ հարևան տարրի ընտրիչը գործարկվել է առաջին պարբերությունում: Այստեղ պիտակներ Եվ հետևեք միմյանց. Իսկ նրանց միջև երկրորդ պարբերությունում օգտագործվում է պիտակը , այժմ կան երկու այլ հարակից զույգ թեգեր. + Եվ + .

Այս դեպքում պիտակը կհամարվի սխալ: պիտակի հարևանությամբ

Այստեղ պիտակ պիտակի երեխա է

Իսկ նա էլ իր հերթին ծնող է .

Ստորև բերված օրինակը չի աշխատի.

Հարևանների ընտրիչ CSS-ում:

պարբերություն և դրանում չաղտարր, և այստեղ հակվածտարր.

Այստեղ չաղԵվ ընդգծել էտարրեր, ավելին հակված.



Ավելի իրական օրինակ

Տեսնենք, թե ինչպես է աշխատում հարեւան ընտրիչը ավելի իրատեսական օրինակով: Մեծ հոդվածներում, որոնք պարունակում են մի քանի բաժիններ, որոնք նշված են պիտակներով

, ցանկալի է բարձրացնել վերին մարժան (margin-top սեփականություն)։ 30px նահանջը տեքստն ավելի ընթեռնելի կդարձնի: Բայց պիտակի դեպքում

գալիս է անմիջապես հետո

, և սա կարող է լինել հոդվածի սկզբում՝ պիտակի վերևում գտնվող նահանջով

ավելորդ կլինի: Դուք կարող եք լուծել այս խնդիրը՝ օգտագործելով հարակից տարրերի ընտրիչը:

Ահա html կոդը օրինակով, թե ինչպես է աշխատում հարևան ընտրիչը:

Հարևանների ընտրիչ CSS-ում

Բարեւ Ձեզ!

վերնագիր h2

վերնագիր h2

Պարբերության տեքստը անհավանական արկածների մասին:

վերնագիր h2

Պարբերության տեքստը անհավանական արկածների մասին:

վերնագիր h2

Պարբերության տեքստը անհավանական արկածների մասին:



Նաև, օգտագործելով հարակից ընտրիչ գործիքը, հարմար է կարգավորել հատվածի վերնագրի և առաջին պարբերության միջև ընկած հատվածը, մեր օրինակում սրանք պիտակներ են

Եվ

Հարկ է նաև նշել, որ հարմար է օգտագործել բացասական արժեքներ՝ ներքևերը նվազեցնելու համար:

Հարևանների ընտրիչ CSS-ում

Բարեւ Ձեզ!

վերնագիր h2

Պարբերության տեքստը անհավանական արկածների մասին:

վերնագիր h2

Պարբերության տեքստը անհավանական արկածների մասին:

վերնագիր h2

Պարբերության տեքստը անհավանական արկածների մասին:

վերնագիր h2

Պարբերության տեքստը անհավանական արկածների մասին:



Այժմ օրինակ, թե ինչպես օգտագործել հարակից ընտրիչը՝ ցուցակի բոլոր տարրերն ընտրելու համար, բացառությամբ առաջինի:

Հարևանների ընտրիչ CSS-ում

  • Ցանկի համար 1 կետ:
  • Ցանկի համար 2 կետ.
  • Ցանկի համար 3 ​​կետ.
  • Ցանկի համար 4 կետ.


Ահա այս օրինակի արդյունքը.

Նկար 1. Աշխատանքային օրինակ #5:

Բարի երեկո Հարգելի գործընկերներ, այսօր ձեզ հետ կուսումնասիրենք լրացուցիչ երկուսը ընտրիչ, որոնք կոչվում են երեխայի և հարևանի css ընտրիչներ. Ավելի մեծ չափով դուք կարող եք անել առանց դրանց, սակայն ձեր զարգացման համար դրանք պետք է սովորել, իսկ երբեմն էլ կիրառել, որպեսզի դրանք մնան ձեր հիշողության մեջ: Այսպիսով, եկեք քննարկենք, թե ինչ ընտրիչներկից են, իսկ որոնք երեխաներ են, և մենք դա կվերլուծենք օրինակով։
երեխայի ընտրիչներ css- տարրեր, որոնք գտնվում են մայր տարրի ներսում: Դրա օրինակը կարող է լինել հետևյալը. Մենք ունենք բլոկ, որը պարունակում է պարբերություն, մեկ այլ բլոկ և նկար: Այս երեք տարրերը երեխաներն են: Եթե ​​մանկական բլոկը պարունակում է նաև այլ տարրեր, ապա նրանք այլևս առաջին բլոկի երեխաներ չեն, այլ բլոկի երեխաներ են, որտեղ նրանք ուղղակիորեն գտնվում են: Հուսով եմ, որ դուք հասկանում եք էությունը:
Հարակից CSS ընտրիչներ- փաստաթղթի կոդում մեկը մյուսի հետևից տեղակայված տարրեր: Սրա օրինակն է սա. Մենք ունենք պարբերություն, որին հաջորդում է պիտակը span. Ամեն ինչ բավականին պարզ է, բայց մենք պարզապես պետք է վերլուծենք այդ ամենը իրական օրինակներով:








Տեքստը պարբերության մեջ


Տեքստը միջակայքում

Այլևս մանկական տեքստ չկա պարբերության մեջ








Ոճերի օգնությամբ մենք կավելացնենք նույն արդյունքը պիտակի համար span

Դիվ > span (
տառատեսակի չափը՝ 200%
}

էջ + span (
գույնը՝ կարմիր
}

Կոդի կատարման արդյունքը երկու դեպքում էլ կկիրառվի պիտակի վրա span, քանի որ դա պիտակի երեխա է դիվև հաջորդը՝ պիտակից հետո էջ. Հետեւաբար, տառատեսակը դարձավ կրկնակի մեծ եւ կարմիր: Այժմ մենք ամբողջությամբ զբաղվել ենք երեխաների և հարևանների ընտրիչներ CSS-ում, և դուք պարզապես պետք է ամրապնդեք ձեր գիտելիքները գործնականում, շուտով կհանդիպենք: