HTML փաստաթղթի կառուցվածքը նման է ընտանիքի ծառին: Ձեր ընտանիքում դուք ունեք ձեր ծնողներն ու մյուսները, ովքեր եկել են ձեզանից: Սրանք ձեր նախնիները: Երեխաները եւ նրանք, ովքեր ձեզանից հետո գալիս են այդ ծառի վրա, ձեր սերունդն են: HTML աշխատում է նույն ձեւով: Այլ տարրերի մեջ գտնվող տարրերն իրենց ժառանգներն են: Օրինակ, քանի որ գրեթե յուրաքանչյուր HTML տարրը
պիտակներից ներսում է, նրանք այդ կառույցի ժառանգորդն են: Այս փոխհարաբերությունը կարեւոր է հասկանալ, թե երբ եք սկսել աշխատել CSS- ի հետ եւ պետք է որոշակի տարրեր թիրախ դնեն տեսողական ոճերի կիրառման համար:CSS տարեցտարի ընտրողներ
CSS- ի հետնորդ ընտրողը վերաբերում է այն տարրերին, որոնք գտնվում են մեկ այլ տարրի ներսում (կամ ավելի հստակորեն նշվում է այն տարրը, որը մեկ այլ տարրի ժառանգորդ է): Օրինակ, անուղղակի ցուցակն ունի պիտակներ պիտակներով, որպես ժառանգներ: Եկեք օգտագործենք հետեւյալ HTML- ը որպես օրինակ:
- Սա հղումը
LI պիտակները UL- ի ժառանգներն են: The Tag- ը հանդիսանում է թե LI (երեխայի ժառանգորդ) եւ UL (թոռնիկի ժառանգորդ) պիտակների ժառանգորդ: Եթե կարծում եք, որ այդ մասին մտածեք ընտանեկան ծառի օրինակով, ապա
- կդառնա ծնող,
- այդ տարրերի երեխա է, եւ կդառնա
- ի երեխա եւ
- :
- ): Էջի մյուս բոլոր հղումները, որոնք ցանկի անվան ժառանգ չեն, չէր ստացվի այս ոճը:
Այսպիսով, ինչպես եք նպատակասլացային տարրեր թիրախում վեբ էջում `օգտագործելով այս ժառանգորդ ընտրողները: Նախ, դուք պետք է սահմանեք ժառանգորդ ընտրողներին, օգտագործելով երկու (կամ ավելի) տեսակի ընտրողներ, առանձնացված տարածքներով:
li a {text-decoration: none; }Այս օրինակում ոճերը կիրառվում են միայն հղման տարրին (), որը ցանկի տարրի տարրերի ժառանգորդն է (
Մի կարեւոր բան հիշելն այն է, որ ոչ մի նշանակություն չունի, թե որքան տեգեր են նրանք, որոնք կարող են օգտագործվել ձեր ժառանգորդի ընտրությամբ: Եթե երկրորդ տարրը կցվում է առաջին տարրի մեջ ցանկացած վայրում, ապա ընտրված է որպես ժառանգ:
Եթե ցանկանում եք ընտրել բոլոր խարիսխները, որոնք իջել են ul տարրերից, դուք գրել եք.
ul ա {text-decoration: ոչ; }Այժմ, այս ոճերը կանդրադառնան ցանկի տոհմի ցանկացած հղմանը: Դուք նույնպես կարող եք գրել այս ընտրացանկը
ul li a {text-decoration: none; }Սա սերմանող ընտրող է, որն օգտագործում է ավելի քան երկու տեսակի ընտրիչ: Այս դեպքում դա վերաբերում է այն հղումների, որոնք ներառում են որպես ցուցակ-կետ, ինչպես նաեւ անսահմանափակ ցուցակի ներսում:
Օգտագործելով դասի ընտրյալները եւ ID սելեկտորները
Սելեկտորները, որոնք դուք իջնում եք, միշտ չէ, որ պետք է տառապող սերունդ: Օրինակ, պատկերացրեք, որ դուք ունեք կայքի տարածքը (նման բաժին), «վահանակի» ID հատկանիշով: Կարող եք ստեղծել ID- ի հետնորդ ընտրող:
#billboard ul {background-color: #ccc; }Սա կդարձնի անսահմանափակ ցուցակ, որը հանդիսանում է «վահանակի» ID- ն ունեցող տարրերի ժառանգություն: Դուք կարող եք նույնը անել դասի արժեքների համար:
div.billboard ul {background-color: #ccc; }Սա ենթադրում է, որ բաժանումը դասի արժեք ունի «վահանակ»: Վերեւում գտնվող CSS- ը կպահի
- տարրը այս դասի արժեք ունեցող որեւէ բաժնի մեջ:
Դուք կարող եք իսկապես ծանրաբեռնված եւ բծախնդիր լինել հետնորդների ընտրողներին: Օրինակ, Dreamweaver- ից օգտվելու համար ձեր HTML կոդը գրելու համար գոյություն ունի կարգավորում, երբ դուք ավելացնում եք CSS- ի նոր կանոններ, որոնք ավտոմատ կերպով ստեղծում են ընտրացանկը `հիմնված ձեր կուրսորը տեղադրելու վրա: Այս Dreamweaver- ն ինչ է անում այս դեպքերում, ստեղծում է դաժան բարդ եւ երկարատեւ ժառանգորդի ընտրություն: Ձեր CSS- ի աշխատելու համար այդքան առանձնահատուկ չէ: Այն, ինչ ցանկանում եք անել, հավասարակշռություն է գտնում ժառանգորդի ընտրողի միջեւ, որը բավականին կոնկրետ է, այնպես որ դուք կարող եք անցնել ներքեւի մասում ձեզ անհրաժեշտ հստակ տարրեր (առանց styling- ի դուք չեք ցանկանում ազդել) առանց CSS կանոնների, որոնք ընտրողներ են, որոնք չափազանց մեծ:
- ի երեխա եւ
- այդ տարրերի երեխա է, եւ կդառնա