Урок за CSS - Стилови приоритети в CSS

Когато използвате CSS, често можете да наблюдавате такава ситуация, когато посочените стилове по някаква причина не работят, въпреки че всичко е написано без грешки. Например размерът на шрифта, цветът на връзката или други параметри на HTML елемента не се променят. В този случай можем да говорим само за едно нещо - някъде в листа със стилове вече съществува селектор (може би повече от един), който засяга този елемент и съдържа същото CSS свойство, върху което не искате да действате. Този селектор е създаден от вас по-рано и може би сте го забравили или не сте го забравили, но просто не сте взели предвид правилата за приоритет на стила.

Приоритетът на стила е точно това, за което ще говорим в този урок, който ще ви научи на цял набор от правила, които браузърите използват, когато обработват вашия CSS. Първо, ние ще разгледаме отделно с вас всеки фактор, който влияе на крайния резултат, и след това ще комбинираме всичко това в една голяма картина.

важно! Момчета, повтарям още веднъж - браузърите изчисляват приоритетите само в ситуации, когато един и същ HTML елемент е засегнат от няколко CSS свойства от вашия стилов лист, опитвайки се да промени същия параметър за него, например цвета на рамката или текста. Тези свойства, които не са дублирани за този елемент, просто се прилагат към него и това е всичко.

Стилови приоритети въз основа на типа селектор

Да, CSS селекторите също влияят върху стиловите приоритети и се вземат предвид не само простите селектори (класове, селектори на етикети, атрибути и т.н.), но и сложните (деца, съседи, селектори на потомци и т.н.).

За да изчислят нивото на приоритет (специфичност) на който и да е селектор, браузърите използват определен алгоритъм, при който на всеки тип се присъжда определен брой точки, което определя тежестта на селектора. Стиловекойто и селектор да получи най-голяма тежест, в крайна сметка ще бъде приложен към елемента. Ако се окаже, че някои селектори, които засягат един и същ HTML елемент, отбелязват еднакъв брой точки, тогава ще се използват стиловите свойства на този в кода по-долу.

Сега нека да разгледаме как браузърите изчисляват тези точки.

  1. Универсален селектор - броят на присъдените точки е нула (0).
  2. Селектори на етикети и псевдоелементи – по една (1) точка.
  3. Селектори на атрибути, класове и псевдокласове - по десет (10) точки.
  4. Идентификатори - сто (100) точки за всеки идентификатор в селектора.
  5. Атрибутът style - вградените стилове не използват селектори, а се задават директно в таговете на елемента, но имат най-висок приоритет, изчислен в хиляда (1000) точки.

За да разберете по-добре как се изчисляват тези виртуални точки, ето няколко прости примера.

Както можете да видите, всичко е съвсем просто. Просто не се плашете предварително, като си мислите, че ще трябва непрекъснато да изчислявате тези резултати, когато създавате вашите таблици със стилове. Всъщност никой никога не мисли така. Обикновено приоритетът на селектора се запомня само когато някои стилове не искат да работят. От тук започват „танците с тамбура” и търсенето на виновника. :)

Пример, демонстриращ приоритет на селектора

Резултат в браузъра

!важно правило

Правилото !important се използва в случаите, когато е необходимо дадено свойство да бъде приложено към даден елемент, независимо в кой селектор и местоположение в CSS кода се намира, както и независимо от съществуващите дубликати. Общ синтаксис:

Пример за използване на правилото !important

Резултат в браузъра

Текстът на първия параграф на този пример е зелен, защото приема стойността на свойството цвят, което е посочено по-долу. Но текстът на втория параграф е червен, защото е използвано !important.

Обърнете внимание, че свойствата с !important имат дори по-висок приоритет от тези, вградени в атрибута style.

Вградени и импортирани стилови приоритети

И така, как и в какъв ред браузърът създава този цялостен стилов лист от отделни файлове с парчета? Е, това е доста предсказуемо, предполагам, че много от вас вече са се досетили. И така, браузърът чете включените стилове, както се появяват в кода, тоест първо взема CSS от първия файл, след това добавя стиловете на втория по-долу, още по-долу - на третия и т.н. Това създава един цялостен каскаден стилов лист, който има същите правила за приоритет като нормален еднофайлов стилов лист.

Позволете ми бързо да ви покажа това схематично, използвайки импортирани стилове като пример, така да се каже, за консолидиране на материала.

Съдържанието на файла style1.css

Обобщена таблица, генерирана от браузъра

Окончателният стилов лист, като се вземат предвид приоритетите и какво е Cascade

За да получат окончателния стилов лист, браузърите използват няколко етапа на избор, които вземат предвид правилата за приоритет, които обсъдихме по-горе.

Е, защо всички същите "каскадни стилови таблици"? Каскадата в този случай е точно това, което е описано по-горе. Тоест възможността браузърът да получава CSS от три различни източника, като се вземат предвид правилата за сортиране и стиловите приоритети. Всичко.