Հարակից CSS ընտրիչներ, ունիվերսալ ընտրիչ և դրանց օգտագործումը: CSS Երեխաների և Հարևանների ընտրիչներ Css Neighbor Elements
Նկարագրություն
Վեբ էջի տարրերը կոչվում են կից, երբ դրանք անմիջապես հաջորդում են միմյանց փաստաթղթի կոդում:
Շարահյուսություն
E + F (Ոճի կանոնների նկարագրություն)
Հարակից տարրերի ոճը կառավարելու համար օգտագործեք գումարած խորհրդանիշը (+), որը տեղադրված է երկու ընտրիչների միջև՝ E և F: Պլյուսի շուրջ տարածությունները պարտադիր չեն: Այս ոճը կիրառվում է F տարրի նկատմամբ, բայց միայն այն դեպքում, եթե այն հարում է E տարրին և անմիջապես հետևում է դրան։ Դիտարկենք մի քանի օրինակ։
Lorem ipsum դոլորնստել ամետ.
Նշել պիտակի երեխա է
Քանի որ այն գտնվում է այս տարայի ներսում: Համապատասխանաբար
Գործում է որպես ծնող .
Lorem ipsum դոլոր նստելամետ.
Պիտակներ Եվ ոչ մի կերպ չեն համընկնում և ներկայացնում են հարակից տարրեր: Այն փաստը, որ դրանք գտնվում են կոնտեյների ներսում Չի ազդում նրանց վերաբերմունքի վրա: Լորեմ ipsumդոլոր նստել ամետ, հաջորդող adipiscing էլիտա.
Հարևան պիտակները այստեղ են Եվ , և նաև Եվ . Միևնույն ժամանակ Եվ հարակից տարրերը չեն մշակվում, քանի որ նրանց միջև կա կոնտեյներ .
HTML5 CSS 2.1 IE Cr Op Sa Fx
Լորեմ ipsumդոլոր նստել ամետ, հաջորդողդիպչող էլիտա.
Lorem ipsum dolor sit amet, հաջորդողդիպչող էլիտա.
Այս օրինակի արդյունքը ներկայացված է Նկ. 1.
Բրինձ. 1. Կարմիր տեքստի գույնը հարակից ընտրիչների համար
Բրաուզերներ
Բրաուզեր Internet Explorer 7-ը չի կիրառում ոճը, եթե ընտրիչների միջև կա մեկնաբանություն (B + /* գումարած */ I ):
Հարակից տարրի ընտրիչը ընտրում է մի տարր, որը գտնվում է փաստաթղթի կոդում անմիջապես մեկ այլ նշված տարրի հետևում: Եկեք որպես օրինակ վերցնենք html կոդի մի հատված:
Պարբերությունը և դրանում ճարպոտտարր, և ահա այն հակվածտարր.
Կան երեք պիտակներ.
, Եվ . Պիտակներ Եվ բույն դրված տարայի մեջ
Նրանք նրա զավակներն են։ Բայց միմյանց նկատմամբ հարևան են։
Հարակից ընտրիչի շարահյուսությունը նախորդ տարրի ընտրիչն է, որին հաջորդում է «+» նշանը, որին հաջորդում է ընտրվող տարրի ընտրիչը: Եկեք աշխատենք հարակից ընտրիչը.
Պարբերությունը և դրանում ճարպոտտարր, և ահա այն հակվածտարր.
Այստեղ ճարպոտԵվ ընդգծել էտարրեր, ավելին հակված.
Օրինակում դուք կարող եք տեսնել, որ հարակից տարրի ընտրիչը գործարկվել է առաջին պարբերությունում: Ահա թեգերը Եվ գնալ մեկը մյուսի հետևից: Իսկ երկրորդ պարբերությունում պիտակը օգտագործվում է նրանց միջև , այժմ կան երկու այլ հարակից զույգ թեգեր. + Եվ + .
Սխալ այս դեպքումկհաշվի պիտակը պիտակի հարևանությամբ
Նշեք այստեղ պիտակի երեխա է
Իսկ նա իր հերթին ծնող է .
Ստորև բերված օրինակը չի աշխատի.
Պարբերությունը և դրանում ճարպոտտարր, և ահա այն հակվածտարր.
Այստեղ ճարպոտԵվ ընդգծել էտարրեր, ավելին հակված.
Ավելի իրական օրինակ
Եկեք նայենք, թե ինչպես է աշխատում հարակից ընտրիչը՝ օգտագործելով ավելի իրատեսական օրինակ: Մեծ հոդվածներում, որոնք պարունակում են պիտակներով նշված մի քանի բաժիններ
, նպատակահարմար է բարձրացնել վերին մարժան (margin-top սեփականություն): 30 պիքսելանոց նահանջը տեքստը ընթեռնելի կդարձնի: Բայց եթե պիտակը գալիս է անմիջապես հետո , և սա կարող է լինել հոդվածի սկզբում՝ պիտակի վերևում գտնվող վերևի նահանջը ավելորդ կլինի: Այս խնդիրը կարելի է լուծել՝ օգտագործելով հարակից տարրերի ընտրիչը:
, և սա կարող է լինել հոդվածի սկզբում՝ պիտակի վերևում գտնվող վերևի նահանջը ավելորդ կլինի: Այս խնդիրը կարելի է լուծել՝ օգտագործելով հարակից տարրերի ընտրիչը:
Ահա html կոդը օրինակով, թե ինչպես է աշխատում հարակից տարրի ընտրիչը:
Ողջույն
Վերնագիր h2
Վերնագիր h2
Պարբերության տեքստը անհավանական արկածների մասին է։
Վերնագիր h2
Պարբերության տեքստը անհավանական արկածների մասին է։
Վերնագիր h2
Պարբերության տեքստը անհավանական արկածների մասին է։
Նաև, օգտագործելով հարակից ընտրիչ գործիքը, հարմար է կարգավորել հատվածի վերնագրի և առաջին պարբերության միջև ընկած հատվածը, մեր օրինակում դրանք պիտակներ են
