Սելեկտորների առաջնահերթությունը և կասկադայնությունը
Սելեկտորների առաջնահերթությունը
Կան մի քանի տարբերակներ էլեմենտին ոճ սահմանելու համար։ Եթե թվարկված լինեն մի քանի սելեկտորներ և բոլորն էլ ազդեցություն ունենան նույն էլեմենտի վրա, ապա բրաուզերին անհրաժեշտ է գտնել ոճի վերջնական տարբերակը։
Օրինակ՝
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 ոճ։
Օրինակ՝
<p style= "color: red;">Hello World </p>
Վերջին՝ 3-րդ տարբերակն առաջնահերթ է առաջին երկուսից։ Այլ տարբերակներում, եթե որևէ հատկությանը սահմանվի « !important » բառը, ապա ամենաառաջնահերթը կդառնա այն։
#one {
color: red;
}
#two {
color: blue !important ;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hayti</title>
<style>
</style>
</head>
<body>
<p id="one" style="color: yellow;">Hello World-01</p>
<p id="two" style="color: yellow;">Hello World-02</p>
</body>
</html>
Կասկադայնությունը
Կասկադայնությունն անհրաժեշտ է, երբ հատկությունների միջև առաջանում է կոնֆլիկտ՝ սելեկտորները հավասար առաջնահերթ են։
Կասկադայնությունն աշխատում է հետևյալ կերպ՝
եթե նույն էլեմենտի համար տարբեր սելեկտորներում սահմանված է նույն հատկությունները տարբեր արժեքներով և եթե սելեկտորները հավասար առաջնահերթ են, ապա էլեմենտին սահմանվում է այն սելեկտորի հատկությունը, որը նշված է ամենավերջում։
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hayti</title>
<style>
p { color: yellow; }
p { color: red; }
p { color: green; } <!-- էլեմենտին կհատկացվի այս տարբերակը -->
</style>
</head>
<body>
<p>Hello World!!</p>
</body>
</html>
Եթե նույն էլեմենտի համար սահմանված են տարբեր հատկություններ, որոնք չունեն որևէ կոնֆլիկտ, ապա դրանք միանում են որպես մեկ 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;
}
Armenian 
Russian