Սելեկտորների առաջնահերթությունը և կասկադայնությունը
Սելեկտորների առաջնահերթությունը
Կան մի քանի տարբերակներ էլեմենտին ոճ սահմանելու համար։ Եթե թվարկված լինեն մի քանի սելեկտորներ և բոլորն էլ ազդեցություն ունենան նույն էլեմենտի վրա, ապա բրաուզերին անհրաժեշտ է գտնել ոճի վերջնական տարբերակը։
Օրինակ՝
div span {
text-decoration: underline;
}
span {
text-decoration: none;
}
Այս խնդիրը լուծվում է css-ի երկու սկզբունքներով՝ սելեկտորների առաջնահերթությունը և կասկադայնությունը։
Սելեկտորների առաջնահերթությունը(приоритет селекторов) -որքան առանձնահատուկ է սելեկտորը, այնքան այն առաջնահերթ է։
Սելեկտորի առաջնահերթությունը հաշվարկվում է թվերի երեք խմբով՝ a, b, c։ Ամենաբարձր առաջնահերթությունը տրվում է a խմբի թվերին, հետո b-ին, c-ին։
Հաշվարկը տեղի է ունենում հետևյալ կերպ՝
– a խմբին են պատկանում իդենտիֆիկատորներ(#example) տեսակի սելեկտորները։
– b խմբին են պատկանում կլաս(.example) տեսակի սելեկտորների, ատրիբուտ սելեկտորների և պսևդոկլասների քանակը։
– c խմբին են պատկանում էլեմենտ տեսակի սելեկտորների(օրինակ՝ p {…}) և պսևդոէլեմենտների քանակը։
Հաշվարկի մեջ հաշվի են առնվում :not(…) պսևդոկլասներում գտնվող սելեկտորները, բայց :not() պսևդոկլասը, « +, >, ~ » կոմբինատորները և ունիվերսալ « * » սելեկտորը ազդեցություն չունեն առաջնահերթության վրա։
Հետևյալ օրինակում թվարկածները դասավորված են փոքրից մեծ առաջնահերթությամբ․
li – a=0 b=0 c=1 -> արդյունքում՝ 0, 0, 1
ul li – a=0 b=0 c=2 -> արդյունքում՝ 0, 0, 2
ul ol+li – a=0 b=0 c=3 -> արդյունքում՝ 0, 0, 3
h1 + *[rel=up] – a=0 b=1 c=1 -> արդյունքում՝ 0, 1, 1
ul ol li.red – a=0 b=1 c=3 -> արդյունքում՝ 0, 1, 3
li.red.level – a=0 b=2 c=1 -> արդյունքում՝ 0, 2, 1
#x34y – a=1 b=0 c=0 -> արդյունքում՝ 1, 0, 0
#s12:not(p) – a=1 b=0 c=1 -> արդյունքում՝ 1, 0, 1
css ոճ էլեմենտին սահմանվում է երեք տարբերակով՝
1.<link> էլեմենտի միջոցով html-ին կցվում է արտաքին css ֆայլը։
2.css ոճը սահմանվում է <style>…</style> էլեմենտում։
3.անմիջապես էլեմենտում style ատրիբուտի միջոցով սահմանվում է css ոճ։
Օրինակ՝
Hello World
Վերջին՝ 3-րդ տարբերակն առաջնահերթ է առաջին երկուսից։ Այլ տարբերակներում, եթե որևէ հատկությանը սահմանվի « !important » բառը, ապա ամենաառաջնահերթը կդառնա այն։
#one {
color: red;
}
#two {
color: blue !important ;
}
Hayti
Hello World-01
Hello World-02
Կասկադայնությունը
Կասկադայնությունն անհրաժեշտ է, երբ հատկությունների միջև առաջանում է կոնֆլիկտ՝ սելեկտորները հավասար առաջնահերթ են։
Կասկադայնությունն աշխատում է հետևյալ կերպ՝
եթե նույն էլեմենտի համար տարբեր սելեկտորներում սահմանված է նույն հատկությունները տարբեր արժեքներով և եթե սելեկտորները հավասար առաջնահերթ են, ապա էլեմենտին սահմանվում է այն սելեկտորի հատկությունը, որը նշված է ամենավերջում։
Hayti
Hello World!!
Եթե նույն էլեմենտի համար սահմանված են տարբեր հատկություններ, որոնք չունեն որևէ կոնֆլիկտ, ապա դրանք միանում են որպես մեկ css ոճ։
h1,h2 {
color: gray;
font-family: sans-serif;
}
h1 {
border-bottom: 1px solid black;
}
/* Վերը նշվածը նույնն է, ինչ հետևյալ տարբերակը՝ */
h1 {
color: gray;
font-family: sans-serif;
border-bottom: 1px solid black;
}
h2 {
color: gray;
font-family: sans-serif;
}
Եթե կան էլեմենտներ, որոնց անհրաժեշտ են նույն հատկությունները, բայց դրանցից մեկին՝ հավելյալ այլ հատկություններ, ապա՝
h1,h2,h3 {
color: gray;
font-family: sans-serif;
}
h2 {
border-bottom: 1px solid black;
}