როგორ მუშაობს CSS-ში სტილების სხვადასხვა პრიორიტეტი?

CSS-ში სტილების პრიორიტეტები განისაზღვრება კასკადური მექანიზმის და სელექტორების სპეციფიკაციის საშუალებით. ძირითადი პრინციპებია:

1. სპეციფიკაცია — ეს სელექტორის წონა არის, რომელიც ითვლება ID-ების, კლასების, ტეგების და სხვა კომპონენტების რაოდენობის მიხედვით. რაც უფრო მაღალია სპეციფიკაცია, მით უფრო პრიორიტეტულია სტილი.

   • ID სელექტორი (#id) აქვს მაღალი პრიორიტეტი.
   • კლასები (.კლასი), ატრიბუტები და ფსევდოსელექტორები საშუალო პრიორიტეტს ფლობენ.
   • ტეგები (div, p) დაბალი პრიორიტეტი აქვთ.

2. კასკადური — თუ ორი წესის სპეციფიკაცია ერთნაირია, გამოიყენება ის, რომელიც უფრო გვიან არის დეკლარირებული კოდში.

3. !important — მაქსიმალურ პრიორიტეტს აძლევს სტილს, გადახედავს სხვა წესებს, გამონაკლისი სხვა !important-ებია, რომლებიც უფრო მაღალი სპეციფიკაციისაა.

4. მემკვიდრეობა — ზოგიერთი თვისება (color, font-family) მემკვიდრეობით გადაეცემა მშობელიდან, თუ არ არის გადახედული.

მაგალითი:

#header { color: red; }       /* სპეციფიკაცია 100 */
.menu { color: blue; }        /* სპეციფიკაცია 10  */
div { color: green; }         /* სპეციფიკაცია 1   */

/* თუ ელემენტს აქვს id="header" და კლასი="menu", ფერი იქნება წითელი */

ასე რომ, ბრაუზერი არჩევს სტილს ყველაზე მაღალი სპეციფიკაციით, განიხილავს წესრიგს და !important-ის არსებობას.